Структура html документа

HTML-документ – это текстовый файл с расширением .html. Структура html документа отражается в дереве DOM, которое браузер строит при разборе файла: в нем видны связи элементов и текста. Вы получите минимальный шаблон HTML5, заполните head, разметите body и проверите каркас в браузере и валидаторе.

Что такое HTML-документ

HTML-документ хранит структуру веб-страницы в обычном текстовом файле. Браузер читает разметку сверху вниз и строит из нее дерево DOM.

DOM описывает родителей, дочерние элементы и текстовые узлы. HTML задает структуру, CSS отвечает за оформление, а JavaScript добавляет поведение.

Сохраните файл с расширением .html, чтобы открыть его локально браузером.

Структура html документа: минимальный шаблон

Скопируйте полный каркас в новый файл и замените текстовые значения своими.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя первая страница</title>
</head>
<body>
</body>
</html>

• <!DOCTYPE html> включает режим стандартов HTML.
• <html lang="ru"> задает корневой элемент и язык документа.
• <head> хранит метаданные и подключения ресурсов.
• <meta charset="UTF-8"> сообщает браузеру кодировку текста.
• meta viewport задает ширину области просмотра мобильного устройства.
• <title> выводит название страницы на вкладке браузера.
• <body> содержит содержимое страницы.

Сохраните файл как index.html в кодировке UTF-8. Откройте его браузером: пустая страница покажет название на вкладке.

Добавьте между тегами body строку <p>Страница работает</p>. После сохранения и обновления вкладки появится этот текст.

Основная структурная единица языка html

Основная структурная единица языка html – элемент. Обычный элемент включает открывающий тег, содержимое и закрывающий тег.

<p class="intro">Привет, мир!</p>

• <p class="intro"> – открывающий тег с атрибутом.
• class="intro" – атрибут и его значение.
• Привет, мир! – содержимое элемента.
• </p> – закрывающий тег.

Тег – это обозначение границы в исходном коде. Элемент – вся конструкция целиком, включая теги, атрибуты и содержимое.

Пустые, или void-элементы, не содержат дочерних узлов и закрывающего тега. К ним относятся meta, link, img и br.

Закрывайте вложенный элемент раньше родительского.

<p>Читайте <strong>внимательно</strong>.</p>

Запись <p><strong>Текст</p></strong> нарушает вложенность. Браузер попробует восстановить дерево DOM, но его результат может отличаться от исходного кода.

Зачем нужен DOCTYPE в HTML-документе

Поставьте <!DOCTYPE html> первой строкой файла. Объявление не создает элемент страницы и сообщает браузеру включить режим стандартов.

Без DOCTYPE браузер переходит в quirks mode, или режим совместимости. Исторические правила этого режима могут менять результат CSS.

MDN описывает режимы quirks и standards. В HTML4 и XHTML использовали более длинные варианты объявления, но HTML5 использует короткую запись.

Элемент html и атрибут lang

Корневой элемент html содержит разделы head и body. Он задает границы документа и не отвечает за его визуальное оформление.

Атрибут lang сообщает основной язык текста. Для русскоязычной страницы укажите lang="ru", для англоязычной – lang="en".

<p>Название книги: <span lang="en">Learning Web Design</span>.</p>

Экранный диктор выбирает произношение с учетом lang. Переводчик и браузер тоже получают подсказку о языке фрагмента.

Браузер может учитывать язык при автоматических переносах слов, включенных CSS. Поисковая система получает дополнительный сигнал, но определяет язык также по содержимому.

Раздел head

Раздел head хранит метаданные, название документа и подключения ресурсов. Видимый текст, заголовки и навигация находятся в body.

Поставьте meta charset первым дочерним элементом head. Весь элемент должен находиться в первых 1024 байтах файла, чтобы браузер выбрал правильную кодировку.

Требование к позиции кодировки описывает HTML Living Standard.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Каталог комнатных растений</title>
  <meta name="description" content="Каталог комнатных растений с советами по уходу.">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <script src="app.js" defer></script>
</head>

Значение width=device-width, initial-scale=1 связывает ширину просмотра с устройством и задает начальный масштаб.

Атрибут defer подходит внешнему классическому скрипту. Браузер загружает файл параллельно разбору HTML и запускает его после разбора.

После meta charset строгий порядок остальных строк для этого шаблона не нужен. Держите настройки страницы перед подключениями ресурсов.

Уберите строки CSS, JavaScript и favicon, если соответствующих файлов рядом с index.html нет.

В head нельзя класть видимые абзацы, заголовки, ссылки навигации и другие элементы содержимого страницы.

Структура html страницы в body: семантические теги

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

• header – вводная область страницы или раздела.
• nav – набор основных навигационных ссылок.
• main – главное содержимое страницы.
• article – самостоятельный материал.
• section – тематический раздел с собственной темой.
• aside – косвенно связанная дополнительная информация.
• footer – заключительная область страницы или раздела.

Используйте один видимый main на документ. Внутри него можно разместить article, его section и aside.

<body>
  <header>
    <p>Домашний сад</p>
    <nav aria-label="Основная навигация">
      <a href="#care">Уход за растениями</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Как ухаживать за фикусом</h1>
      <p>Подберите растению подходящее освещение.</p>
      <section id="care">
        <h2>Полив и освещение</h2>
        <p>Проверяйте влажность грунта перед поливом.</p>
      </section>
    </article>
    <aside>
      <h2>Дополнительная справка</h2>
      <p>Уход зависит от вида фикуса.</p>
    </aside>
  </main>

  <footer>
    <p>Учебная страница о комнатных растениях.</p>
  </footer>
</body>

Замените пустой body в минимальном шаблоне этим фрагментом. Сохраните файл и обновите вкладку: браузер покажет области страницы и их содержимое.

Дерево этого примера выглядит так:

html
├── head
│   ├── meta
│   └── title
└── body
    ├── header
    │   └── nav
    ├── main
    │   ├── article
    │   │   └── section
    │   └── aside
    └── footer

header и footer могут встречаться внутри отдельных статей. Выбирайте section, когда области нужна собственная тема и заголовок.

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

Как проверить структуру документа

Проверяйте исходный HTML и DOM, который построил браузер. Первый способ находит нарушения правил, второй показывает результат разбора.

1. Откройте W3C Markup Validation Service.
2. Выберите на странице способ «Validate by Direct Input» и вставьте документ целиком, включая DOCTYPE, head и body.
3. Запустите проверку через кнопку «Validate Full Document». Сервис покажет сообщения с номером строки и описанием проблемы.
4. Исправьте первое сообщение в файле и отправьте код повторно. После успешной проверки отчет не содержит ошибок разметки.

Для опубликованной страницы выберите способ «Validate by URI», вставьте полный адрес в поле «Address:» и запустите проверку. Отчет покажет найденные ошибки по адресу страницы.

Локальный файл с адресом file:// проверяйте через «Validate by Direct Input»: вставьте туда полный код документа.

Откройте инструменты разработчика браузера и перейдите на вкладку Elements. Раскройте html, затем head и body.

Сравните дерево DOM с исходным файлом. Если браузер переместил абзац или изменил вложенность, проверьте закрывающие теги и допустимое содержимое родителя.

Введите в консоли инструментов разработчика выражение:

document.compatMode

Значение BackCompat означает quirks mode. Значение CSS1Compat означает режим стандартов для обычного документа.

Ошибки в структуре HTML-документа

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

Положение charset первым помогает выполнить правило первых 1024 байт без дополнительных расчетов. Главное условие – весь элемент кодировки должен попасть в этот диапазон.

После исправлений снова откройте страницу и сравните DOM. Валидатор проверяет правила HTML, а вкладка Elements показывает дерево, которое построил браузер.

Совет от нашей редакции: сохраните пустой проверенный шаблон отдельным файлом и начинайте новые страницы с его копии.