Урок 2. Структура HTML-документа

Что такое HTML

HTML (HyperText Markup Language) — язык разметки, на котором описывают структуру веб-страницы. Это не язык программирования: в нём нет переменных, циклов и условий. Это набор тегов, которые говорят браузеру: «здесь заголовок», «здесь абзац», «здесь ссылка».

Теги и атрибуты

Тег — специальная конструкция, которая размечает часть содержимого. Большинство тегов парные: открывающий <p> и закрывающий </p>. Между ними — содержимое.

Некоторые теги одиночные — например, <img> или <br>. Их не нужно закрывать.

Атрибуты — дополнительные параметры тега. Они всегда пишутся в открывающем теге, в формате имя="значение":

<a href="https://example.com" target="_blank">Ссылка</a>

Здесь href и target — атрибуты тега <a>. Атрибут href задаёт адрес, target — открывать ссылку в новой вкладке.

Минимальный HTML-документ

Любой HTML-файл начинается с одной и той же конструкции. Запомните её как формулу:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Моя страница</title>
  </head>
  <body>
    <h1>Привет!</h1>
  </body>
</html>

Разберём каждый элемент:

<!DOCTYPE html> — говорит браузеру: это HTML5. Всегда первая строка.
<html> — корневой тег, внутри него вся страница.
<head> — служебная информация. Пользователь её не видит.
<body> — то, что видно на странице.

Вложенность

Теги вкладываются друг в друга как матрёшки. Важно соблюдать порядок: если <p> открылся внутри <body>, он должен закрыться до закрытия <body>.

Правильно:

<body>
  <p>Текст</p>
</body>

Неправильно (теги «пересекаются»):

<body>
  <p>Текст
</body>
  </p>

Браузер часто прощает такие ошибки, но в сложных страницах это ломает разметку. Всегда закрывайте теги по порядку.

Отступы

Код без отступов работает, но читать его невозможно. Принято делать отступ на 2 или 4 пробела для каждого вложенного уровня:

<body>
  <h1>Заголовок</h1>
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
</body>

В DevTools отступы не важны — там всё показывается в виде дерева. Но в файле — критичны. Привыкайте к ним сразу.

Регистр и кавычки

HTML исторически терпим к регистру: <H1> и <h1> браузер понимает одинаково. Но стандарт предписывает писать теги и атрибуты в нижнем регистре.

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

Стандарт оформления кода:
• Теги и атрибуты — в нижнем регистре
• Значения атрибутов — в двойных кавычках
• Вложенные элементы — с отступом
• Все теги — закрыты

Проверьте себя

Перед вами — документ. Откройте его в редакторе и исправьте: расставьте отступы, закройте пропущенные теги, приведите регистр к нижнему.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta CHARSET="utf-8">
<TITLE>Проверка</TITLE>
</HEAD>
<BODY>
<H1>Большой заголовок</h1>
<p>Первый абзац.
<p>Второй абзац.</p>
</BODY>
</HTML>

Что дальше

Теперь вы знаете скелет HTML-документа. В следующем уроке разберём тег <head> подробно: кодировка, заголовок вкладки, описание страницы, подключение стилей.