Заголовки: h1–h6

Элементы <h1>–<h6> — иерархия заголовков HTML-документа, задающая структуру содержимого для браузеров, screen readers и поисковых систем.

Зачем нужно

Заголовки — основа навигации по документу. Screen reader позволяет пользователям перемещаться по заголовкам (клавиша H в NVDA/JAWS) и получать оглавление страницы. Поисковые системы используют иерархию заголовков для понимания темы и структуры страницы. Нарушение иерархии (пропуск уровней, несколько <h1>) ухудшает и a11y, и SEO.

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

  • Структура контентных страниц (статьи, документация)
  • Разделы лендингов и корпоративных сайтов
  • Карточки с заголовком (товары, посты)
  • Форумные темы и комментарии

Иерархия и правила

<!-- Правильная иерархия -->
<h1>Руководство по HTML</h1>           <!-- Тема всей страницы (один раз) -->
  <h2>Основы</h2>                       <!-- Главный раздел -->
    <h3>Структура документа</h3>        <!-- Подраздел -->
    <h3>Метатеги</h3>
  <h2>Семантика</h2>
    <h3>Заголовки</h3>
      <h4>Правила иерархии</h4>         <!-- Под-подраздел -->
    <h3>Формы</h3>
  <h2>Доступность</h2>

<h1> — главный заголовок страницы

<main>
  <h1>Введение в HTML5</h1>
  <p>Первый параграф статьи...</p>
</main>
  • На странице должен быть ровно один <h1>
  • Он описывает тему всей страницы
  • Совпадает или близок к <title> в <head>

Заголовки в компонентах

Уровень заголовка зависит от контекста, а не от компонента:

<!-- Список карточек — заголовок каждой карточки <h2> -->
<main>
  <h1>Каталог товаров</h1>
  <ul>
    <li>
      <article>
        <h2>MacBook Pro 14</h2>
        <p>189 990 ₽</p>
      </article>
    </li>
    <li>
      <article>
        <h2>MacBook Air 15</h2>
        <p>149 990 ₽</p>
      </article>
    </li>
  </ul>
</main>

Визуальный стиль vs семантика

Если нужен визуальный вид <h2>, но уровень <h4> — менять CSS, не HTML:

<!-- Плохо: нарушение иерархии ради вида -->
<h1>Заголовок страницы</h1>
<h4>Следующий раздел</h4> <!-- пропуск h2, h3 -->

<!-- Хорошо: правильная иерархия + CSS -->
<h1>Заголовок страницы</h1>
<h2 class="h4-style">Следующий раздел</h2>

.h4-style { font-size: 1rem; font-weight: 600; }

ARIA-заголовки (когда нет <h>)

<!-- Если семантически заголовок нужен, но в DOM не должен быть -->
<div role="heading" aria-level="2">Заголовок без тега h</div>

Использовать только в крайних случаях.

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

Ошибка Почему плохо Как правильно
Несколько <h1> на странице Непонятно, какова тема страницы Один <h1> — одна тема
Пропуск уровней (<h1> → <h4>) Screen reader теряет структуру Соблюдай последовательность
Использование <h> для стилизации размера текста Нет смысловой структуры Используй CSS-классы
<h> в <header> сайта вместо логотипа <h1> только для контента страницы Логотип — <a> + <img>

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

Ресурсы