Заголовки h1-h6

Элементы <h1> -- <h6> определяют заголовки шести уровней вложенности, создавая иерархическую структуру документа.

Зачем нужно

Заголовки -- основа структуры документа. Они создают outline (оглавление) страницы, по которому навигируют screen readers, поисковые роботы и пользователи. Правильная иерархия заголовков критична для SEO и доступности.

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

  • Каждая веб-страница (минимум один заголовок)
  • Статьи и блог-посты
  • Документация
  • Landing pages

Предпосылки

Уровни заголовков

<h1>Заголовок 1 уровня — самый важный</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня — наименее важный</h6>

По умолчанию браузер отображает их с убывающим размером шрифта, но размер не важен -- важна семантическая иерархия. Внешний вид всегда можно изменить через CSS.

Иерархия заголовков (outline)

<!-- Правильная иерархия: не пропускай уровни -->
<h1>Руководство по HTML</h1>                    <!-- 1 -->
  <h2>Основы</h2>                               <!-- 1.1 -->
    <h3>Теги и атрибуты</h3>                     <!-- 1.1.1 -->
    <h3>Семантика</h3>                           <!-- 1.1.2 -->
  <h2>Формы</h2>                                 <!-- 1.2 -->
    <h3>Элементы форм</h3>                       <!-- 1.2.1 -->
      <h4>Input</h4>                             <!-- 1.2.1.1 -->
      <h4>Select</h4>                            <!-- 1.2.1.2 -->
    <h3>Валидация</h3>                           <!-- 1.2.2 -->
  <h2>Доступность</h2>                           <!-- 1.3 -->

Правило одного <h1>

На каждой странице один <h1> -- главный заголовок страницы:

<!-- Правильно: один h1 -->
<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <h1>Каталог товаров</h1>
    <section>
      <h2>Электроника</h2>
      <h3>Смартфоны</h3>
    </section>
    <section>
      <h2>Одежда</h2>
    </section>
  </main>
</body>

Технически несколько <h1> валидны в HTML5, но с точки зрения SEO и a11y -- один <h1> на страницу.

Не пропускай уровни

<!-- ПЛОХО: перепрыгнул с h1 на h3 -->
<h1>Заголовок</h1>
<h3>Подзаголовок</h3>

<!-- ХОРОШО: последовательная иерархия -->
<h1>Заголовок</h1>
<h2>Подзаголовок</h2>

Пропуск уровней (h1 → h3) нарушает outline документа. Screen readers и поисковики ожидают последовательную иерархию.

Исключение: после глубокого уровня можно вернуться на любой верхний:

<h1>Главный</h1>
  <h2>Раздел</h2>
    <h3>Подраздел</h3>
      <h4>Параграф</h4>
  <h2>Другой раздел</h2>  <!-- OK: вернулись на h2 -->

Заголовки и семантические секции

<main>
  <h1>Блог</h1>

  <article>
    <header>
      <h2>Первая статья</h2>
      <p><time datetime="2026-04-06">6 апреля</time></p>
    </header>
    <p>Контент...</p>

    <section>
      <h3>Комментарии</h3>
      <!-- ... -->
    </section>
  </article>

  <article>
    <header>
      <h2>Вторая статья</h2>
    </header>
    <p>Контент...</p>
  </article>
</main>

<aside>
  <h2>Популярное</h2>
  <ul>...</ul>
</aside>

SEO и заголовки

Фактор Рекомендация
<h1> Содержит главное ключевое слово страницы
Один <h1> На каждой странице один h1
Длина h1 20-70 символов
h1 = title h1 и <title> должны быть близки по смыслу
Иерархия Последовательная, без пропусков
Keywords в h2-h3 Вторичные ключевые слова в подзаголовках 
<!-- Хорошо для SEO -->
<title>Руководство по HTML для начинающих | WebDev</title>
<h1>Руководство по HTML для начинающих</h1>
<h2>Что такое HTML</h2>
<h2>Основные теги HTML</h2>
<h3>Текстовые теги</h3>
<h3>Структурные теги</h3>

Стилизация заголовков

Размер заголовка -- дело CSS, не HTML:

<style>
  /* Сброс стилей и собственная типографика */
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
  }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }

  /* Визуально маленький, но семантически h2 */
  .h2-small {
    font-size: 1rem;
    font-weight: 400;
  }
</style>

<!-- Семантически h2, визуально мелкий -->
<h2 class="h2-small">Подзаголовок</h2>

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

Ошибка Почему плохо Как правильно
Несколько <h1> Путает SEO и screen readers Один <h1> на страницу
Выбор уровня по размеру Нарушена иерархия Уровень по структуре, размер через CSS
Пропуск уровней Сломанный outline h1 → h2 → h3, не h1 → h3
Заголовок для стилей <h3> только из-за размера Используй CSS-классы
Пустой заголовок Плохо для a11y Заголовок должен содержать текст
Заголовок только из картинки Screen reader не прочитает Добавь текст (можно visually-hidden)

Практика

  1. Создай страницу со всеми шестью уровнями заголовков
  2. Установи расширение HeadingsMap для Chrome -- проверь outline страницы
  3. Возьми любой сайт и проверь его иерархию заголовков через HeadingsMap
  4. Создай страницу, где <h3> визуально больше <h2> через CSS -- убедись, что иерархия в outline не нарушена
  5. Попробуй навигацию по заголовкам в screen reader (NVDA: клавиша H)

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

Ресурсы