Лекции
Начать
Начать обучение
JavaRush /Курсы /Python SELF /Знакомство с HTML

Знакомство с HTML

Python SELF
29 уровень , 0 лекция
Открыта

1. Теги в HTML

Что такое HTML?

HTML (HyperText Markup Language) — это язык разметки, который используется для создания и структурирования веб-страниц. С помощью HTML мы можем организовать содержание страницы, используя различные теги и атрибуты, чтобы браузер знал, как отображать информацию. В этой лекции мы рассмотрим основные понятия HTML, такие как теги, дерево тегов, атрибуты, одиночные теги и структуру HTML-документа.

В HTML теги — это ключевые элементы, которые позволяют разметить содержимое. Они обрамляют текст и другие элементы, помогая браузеру понять, как именно их показывать. Например, теги <h1> и <p> указывают браузеру, что текст внутри них является заголовком или абзацем.

Теги записываются внутри угловых скобок <>. Большинство тегов открываются и закрываются, то есть состоят из начального и конечного тега. Например:

HTML 
                      
                        <h1>Это заголовок</h1>
                        <p>Это абзац текста.</p>
Frontend-университет

Здесь <h1> — это начальный тег, а </h1> — конечный тег.

Дерево тегов

HTML-документ имеет иерархическую структуру, где теги вложены друг в друга, образуя древовидную структуру. Это «дерево тегов» определяет, как элементы на странице связаны между собой и в каком порядке должны отображаться.

Вот пример простого дерева тегов:

Python 

<html>
<head>
  <title>Пример страницы</title>
</head>
<body>
  <h1>Заголовок страницы</h1>
  <p>Здесь находится текст абзаца.</p>
</body>
</html>

В этом примере тег <html> является корневым элементом, внутри него находятся <head> и <body>. Внутри <body> расположены теги <h1> и <p>. Такая структура позволяет логически упорядочить содержание страницы.

Атрибуты

Атрибуты в HTML используются для добавления дополнительной информации к тегам. Они располагаются в начальном теге и состоят из имени и значения. Например:

HTML 

<a href="https://example.com">Ссылка на сайт</a>
<img src="image.jpg" alt="Описание изображения">
  • href указывает адрес ссылки.
  • src — путь к изображению.
  • alt — альтернативный текст, который будет отображаться, если изображение не загрузится.

Атрибуты позволяют добавить элементам дополнительные характеристики, такие как идентификатор (id), классы (class), стили (style) и многое другое.

Одиночные теги

Некоторые HTML-теги не содержат внутреннего содержимого и не требуют закрывающего тега. Такие теги называют одиночными. Например, тег <img> используется для вставки изображения, и его структура выглядит так:

CSS 
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Описание изображения">
HTML 
  
    <img src="image.jpg" alt="Описание изображения">

Другие примеры одиночных тегов:

  • <br> — для переноса строки.
  • <hr> — для добавления горизонтальной линии.

2. Знакомство с HTML-документом

HTML-документ начинается с объявления <!DOCTYPE html>, которое указывает браузеру, что это документ HTML5. Затем идет корневой тег <html>, который содержит теги <head> и <body>. В <head> находятся метаданные документа (заголовок, стили, скрипты), а в <body> — основное содержимое страницы.

Пример HTML-документа

Python 
      
        <!DOCTYPE html>
        <html lang="ru">
        <head>
          <meta charset="UTF-8">
          <title>Моя первая страница</title>
        </head>
        <body>
          <h1>Добро пожаловать!</h1>
          <p>Это пример HTML-документа.</p>
          <a href="https://example.com">Посетите наш сайт</a>
        </body>
        </html>
  • <!DOCTYPE html> сообщает браузеру, что документ написан на HTML5.
  • <html lang="ru"> указывает язык документа.
  • <meta charset="UTF-8"> определяет кодировку, что помогает корректно отображать символы.
  • <title> задает название страницы, которое будет видно в заголовке окна браузера.

Дополнительные теги в <head>

Тег <head> содержит информацию, которая не отображается напрямую на странице, но важна для работы сайта. Внутри <head> можно добавить следующие теги:

  • <meta name="description" content="Описание страницы"> — краткое описание страницы для поисковых систем.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — позволяет сделать сайт адаптивным для мобильных устройств.
  • <link rel="stylesheet" href="styles.css"> — подключение файла CSS со стилями.
  • <script src="script.js"></script> — подключение внешнего JavaScript-файла.

Эти теги помогают улучшить взаимодействие с пользователем, оптимизировать страницу для поисковых систем и подключить необходимые ресурсы.

Комментарии (1)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
Ioanna Polyak Уровень 43
1 сентября 2025
Я 1