<h1>–<h6> Элементы заголовков разделов HTML

Элементы HTML от <h1> до <h6> представляют шесть уровней заголовков разделов. <h1> — это самый высокий уровень раздела, а <h6> — самый низкий. По умолчанию все элементы заголовков создают в макете блочный контейнер, который начинается с новой строки и занимает всю доступную ширину родительского блока.

Попробуйте

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

h1,
h2,
h3,
h4 {
  margin: 0.1rem 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  padding-left: 20px;
}

h3 {
  font-size: 1.2rem;
  padding-left: 40px;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  padding-left: 60px;
}

Атрибуты

Эти элементы поддерживают только глобальные атрибуты.

Примечания по использованию

• Пользовательские агенты могут использовать информацию о заголовках для автоматического создания оглавления документа.
• Не используйте элементы заголовков для изменения размера текста. Вместо этого используйте свойство CSS font-size.
• Не пропускайте уровни заголовков: всегда начинайте с <h1>, затем используйте <h2> и так далее.

Не используйте несколько элементов <h1> на одной странице

Хотя стандарт HTML допускает использование нескольких элементов <h1> на одной странице (если они не вложены друг в друга), это не считается хорошей практикой. Обычно на странице должен быть только один элемент <h1>, описывающий её содержимое (подобно элементу <title> документа).

Предпочтительно использовать только один элемент <h1> на страницу и вкладывать заголовки, не пропуская уровни.

Задание единого размера шрифта для <h1>

До мая 2025 года стандарт HTML предписывал отображать элементы <h1> внутри элементов <section>, <article>, <aside> или <nav> как <h2> (меньший размер font-size с изменённым значением margin-block) либо как <h3> при вложении на следующий уровень, и так далее. Этот особый стиль по умолчанию, зависящий от контекста, теперь удалён.

Чтобы обеспечить единообразное отображение <h1> в браузерах, реализующих старый стиль по умолчанию, зависящий от контекста, используйте следующее правило стилей:

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

В качестве альтернативы, чтобы не переопределять другие правила стилей для <h1>, можно использовать :where(), селектор с нулевой специфичностью:

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

Доступность

Навигация

Распространённый способ навигации для пользователей программ чтения с экрана — быстро переходить от одного заголовка к другому, чтобы определить содержимое страницы. Поэтому важно не пропускать один или несколько уровней заголовков. Это может вызвать замешательство: человек, использующий такой способ навигации, может задуматься, где находится пропущенный заголовок.

Не делайте так:

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Лучше так:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

Вложенность

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

Для следующей структуры страницы:

<h1>Beetles</h1>

<h2>Etymology</h2>

<h2>Distribution and Diversity</h2>

<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<h3>Jurassic</h3>
<h3>Cretaceous</h3>
<h3>Cenozoic</h3>

<h2>External Morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<h3>Legs</h3>
<h3>Wings</h3>
<h3>Abdomen</h3>

Программы чтения с экрана сформируют список наподобие этого:

1. h1 Жуки

   1. h2 Этимология

   2. h2 Распространение и разнообразие

   3. h2 Эволюция

      1. h3 Поздний палеозой
      2. h3 Юрский период
      3. h3 Меловой период
      4. h3 Кайнозой

   4. h2 Внешняя морфология

      1. h3 Голова

         1. h4 Ротовые органы

      2. h3 Грудь

         1. h4 Переднегрудь
         2. h4 Птероторакс

      3. h3 Ноги

      4. h3 Крылья

      5. h3 Брюшко

При вложении заголовков уровни могут «пропускаться» при завершении подраздела.

• Заголовки • Структура страницы • Учебные материалы WAI по доступности веб-контента
• Понимание WCAG на MDN: пояснения к руководству 1.3
• Понимание критерия успеха 1.3.1 | Понимание WCAG 2.0 от W3C
• Понимание WCAG на MDN: пояснения к руководству 2.4
• Понимание критерия успеха 2.4.1 | Понимание WCAG 2.0 от W3C
• Понимание критерия успеха 2.4.6 | Понимание WCAG 2.0 от W3C
• Понимание критерия успеха 2.4.10 | Понимание WCAG 2.0 от W3C

Обозначение содержимого разделов

Ещё один распространённый способ навигации для пользователей программ чтения с экрана — создание списка содержимого разделов и его использование для определения структуры страницы.

Содержимое разделов можно обозначить с помощью сочетания атрибутов aria-labelledby и id, кратко описав назначение раздела. Этот способ полезен, когда на одной странице присутствует несколько элементов секционирования.

Примеры содержимого разделов

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

В этом примере программа чтения с экрана сообщит о наличии двух разделов <nav>: «Основная навигация» и «Навигация в нижнем колонтитуле». Если бы метки не были указаны, пользователю программы чтения с экрана, возможно, пришлось бы изучить содержимое каждого элемента nav, чтобы определить его назначение.

• Использование атрибута aria-labelledby
• Обозначение областей • Структура страницы • Учебные материалы W3C WAI по доступности веб-контента

Примеры

Все заголовки

В следующем коде показаны все уровни заголовков.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Пример страницы

В следующем коде показано несколько заголовков с содержимым под ними.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here…</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here…</p>

<h3>Example 2</h3>
<p>Some text here…</p>

<h2>See also</h2>
<p>Some text here…</p>

Техническая сводка

Спецификации

Совместимость с браузерами

html.elements.h1

html.elements.h2

html.elements.h3

html.elements.h4

html.elements.h5

html.elements.h6

См. также

• <p>
• <div>
• <section>