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

Разбираем обязательный «скелет», который есть у каждой HTML-страницы.

Любая страница состоит из головы (head) — служебной информации, и тела (body) — того, что видит пользователь.

Полный скелет страницы

Вот минимальный, но правильный HTML-документ. Это шаблон, с которого начинается каждая страница:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <p>Это моя первая страница.</p>
  </body>
</html>

Разберём по частям, что здесь происходит.

<!DOCTYPE html> — объявление

Самая первая строка. Она сообщает браузеру: «это современный HTML5-документ, отображай его по актуальным правилам». Это не тег в обычном смысле — у него нет закрывающей пары. Просто запомните: каждая страница начинается с <!DOCTYPE html>.

<html> — корень документа

Внутри него лежит вообще всё остальное. Это корневой элемент. Атрибут lang="ru" сообщает, что страница на русском языке — это помогает поисковикам и программам чтения с экрана.

<head> — голова, невидимая часть

В head лежит служебная информация о странице, которую пользователь напрямую не видит на самой странице:

<meta charset="UTF-8"> — кодировка. Без неё русские буквы могут превратиться в «кракозябры».
<title> — заголовок вкладки. Именно его вы видите в названии вкладки браузера и в результатах поиска.

<body> — тело, видимая часть

А вот в body лежит то, что реально появляется на странице: заголовки, абзацы, картинки, ссылки, кнопки. Когда дальше в курсе мы будем «писать страницу», мы почти всегда работаем именно внутри body.

Вложенность и отступы

Обратите внимание: элементы вложены друг в друга, как матрёшки. head и body лежат внутри html, а h1 и p — внутри body. Чтобы было видно, что во что вложено, разработчики делают отступы пробелами. Браузеру отступы безразличны, но человеку без них читать тяжело.

Что будет, если что-то пропустить

Браузеры на удивление снисходительны: если вы забудете <html> или <body>, страница, скорее всего, всё равно покажется — браузер достроит недостающее сам. Но полагаться на это не стоит. Полный и правильный скелет — это страховка: он предсказуемо работает во всех браузерах, корректно индексируется поисковиками и не преподносит сюрпризов, когда страница вырастет.

Поэтому возьмите за привычку всегда начинать с полного шаблона. В редакторе VS Code, кстати, есть подсказка: наберите ! и нажмите Tab — редактор сам вставит готовый скелет страницы. Но важно понимать, что именно он вставил, — а теперь вы это понимаете.

Часть	Назначение
`<!DOCTYPE html>`	говорит браузеру: это HTML5
`<html>`	корень, содержит всё
`<head>`	служебные данные о странице
`<body>`	видимое содержимое

Итог

Каждая страница начинается с <!DOCTYPE html> и обёрнута в <html>.
head — невидимая служебная часть (кодировка, заголовок вкладки), body — видимое содержимое.
Элементы вкладываются друг в друга; отступы делают разметку читаемой для человека.