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

Каждый HTML-документ состоит из объявления DOCTYPE и трёх вложенных элементов: <html>, <head> и <body>.

Зачем нужно

Правильная структура HTML-документа -- основа для корректного рендеринга в браузере. Без неё браузер может переключиться в quirks mode, поисковые системы не поймут содержимое, а screen readers не смогут навигировать по странице.

Где используется

  • Каждый HTML-файл на каждом сайте
  • Шаблоны серверного рендеринга (PHP, Jinja2, EJS, Blade)
  • Компоненты SPA-фреймворков (index.html)
  • HTML-письма (упрощённая структура)

Предпосылки

Анатомия HTML-документа

Полная минимальная структура

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Заголовок страницы</title>
</head>
<body>
  <!-- Видимое содержимое -->
</body>
</html>

<!DOCTYPE html>

Объявление типа документа. Не является HTML-тегом. Говорит браузеру использовать стандартный режим рендеринга (standards mode). Подробнее -- в DOCTYPE.

<html> -- корневой элемент

Корень документа. Все остальные элементы -- его потомки.

<html lang="ru" dir="ltr">
  <!-- head и body -->
</html>

Важные атрибуты:

Атрибут Значение Назначение
lang "ru", "en", "de" Язык документа. Критичен для screen readers и SEO
dir "ltr" или "rtl" Направление текста (left-to-right / right-to-left)

Атрибут lang обязателен. Без него:

  • Screen readers читают текст с неправильным произношением
  • Браузерный перевод может работать некорректно
  • Поисковые системы не понимают язык страницы
  • CSS-селектор :lang не сработает

Для многоязычных страниц lang можно ставить на отдельные элементы:

<html lang="ru">
<body>
  <p>Текст на русском</p>
  <p lang="en">Text in English</p>
  <blockquote lang="fr">Texte en français</blockquote>
</body>
</html>

<head> -- метаинформация

Контейнер для метаданных документа. Содержимое <head> не отображается на странице (кроме <title> во вкладке браузера).

<head>
  <!-- Кодировка — ВСЕГДА первой строкой -->
  <meta charset="UTF-8">

  <!-- Viewport для мобильных -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Заголовок вкладки -->
  <title>Название страницы</title>

  <!-- Описание для поисковиков -->
  <meta name="description" content="Краткое описание страницы">

  <!-- Иконка вкладки -->
  <link rel="icon" href="/favicon.ico">

  <!-- Подключение CSS -->
  <link rel="stylesheet" href="/styles/main.css">

  <!-- Предзагрузка шрифтов -->
  <link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Open Graph для соцсетей -->
  <meta property="og:title" content="Название">
  <meta property="og:description" content="Описание">
  <meta property="og:image" content="https://example.com/image.jpg">
</head>

Порядок имеет значение:

  1. <meta charset="UTF-8"> -- всегда первой (в первых 1024 байтах)
  2. <meta name="viewport"> -- сразу после charset
  3. <title> -- обязательный элемент
  4. Остальные <meta>, <link>, <style>, <script>

Что может быть внутри <head>:

Элемент Назначение
<meta> Метаданные (charset, viewport, description)
<title> Заголовок вкладки (обязателен)
<link> Внешние ресурсы (CSS, favicon, preload)
<style> Встроенные CSS-стили
<script> JavaScript (лучше в конце <body> или с defer)
<base> Базовый URL для относительных ссылок
<noscript> Контент при отключённом JS

<body> -- видимое содержимое

Всё, что видит пользователь, находится внутри <body>:

<body>
  <header>
    <nav>
      <a href="/">Главная</a>
      <a href="/about">О нас</a>
    </nav>
  </header>

  <main>
    <h1>Добро пожаловать</h1>
    <p>Контент страницы.</p>
  </main>

  <footer>
    <p>&copy; 2026 Компания</p>
  </footer>

  <!-- Скрипты лучше перед </body> или с defer -->
  <script src="/js/app.js"></script>
</body>

Рекомендуемая структура body

<body>
  <!-- Ссылка для пропуска навигации (a11y) -->
  <a href="#main" class="skip-link">Перейти к содержимому</a>

  <header>
    <nav aria-label="Основная навигация">...</nav>
  </header>

  <main id="main">
    <article>
      <h1>Заголовок</h1>
      <!-- Основной контент -->
    </article>
    <aside>
      <!-- Боковая панель -->
    </aside>
  </main>

  <footer>
    <nav aria-label="Подвал">...</nav>
  </footer>
</body>

<meta charset="UTF-8">

Определяет кодировку символов. UTF-8 -- стандарт, поддерживающий все языки мира.

Без указания charset:

  • Кириллица может превратиться в кракозябры
  • Эмодзи не отобразятся
  • Спецсимволы сломаются

Правило: <meta charset="UTF-8"> должен быть в первых 1024 байтах документа. Ставь его первой строкой в <head>.

Полный шаблон продакшн-документа

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Название | Сайт</title>
  <meta name="description" content="Описание страницы до 160 символов">

  <!-- Favicons -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Название">
  <meta property="og:description" content="Описание">
  <meta property="og:image" content="https://example.com/og.jpg">
  <meta property="og:url" content="https://example.com/page">

  <!-- Стили -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="/css/main.css">

  <!-- Скрипты с defer -->
  <script src="/js/app.js" defer></script>
</head>
<body>
  <a href="#main" class="visually-hidden">Перейти к содержимому</a>

  <header>
    <nav aria-label="Основная">
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/catalog">Каталог</a></li>
        <li><a href="/contacts">Контакты</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">
    <h1>Заголовок страницы</h1>
    <p>Содержимое.</p>
  </main>

  <footer>
    <p>&copy; 2026</p>
  </footer>
</body>
</html>

Частые ошибки

Ошибка Почему плохо Как правильно
<meta charset> не первая в <head> Браузер может неверно декодировать начало документа Ставь charset первой строкой в <head>
Нет <title> Невалидный документ, плохо для SEO <title> обязателен
lang не указан Screen reader читает с неправильным акцентом <html lang="ru">
CSS в <body>, а не в <head> Flash of unstyled content (FOUC) <link rel="stylesheet"> только в <head>
<script> в <head> без defer Блокирует рендеринг страницы Используй defer или ставь перед </body>
Контент вне <body> Непредсказуемое поведение Весь видимый контент внутри <body>

Практика

  1. Напиши минимальный валидный HTML5-документ с charset, viewport, title
  2. Проверь его на validator.w3.org -- должно быть 0 ошибок
  3. Попробуй убрать <title> и проверить валидатором -- увидишь ошибку
  4. Добавь Open Graph теги и проверь превью через opengraph.xyz
  5. Открой DevTools → Elements и найди <html>, <head>, <body> в дереве

Связанные темы

Ресурсы