<h1>–<h6>: заголовки разделов

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

Интерактивный пример

Категории содержимого Основной поток, содержимое заголовков, явное содержимое.
Допустимое содержимое Фразовое содержимое.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, разрешающий основной поток.
Неявная ARIA-роль heading (en-US)
Допустимые ARIA-роли tab (en-US), presentation (en-US) или none (en-US)
Интерфейс DOM HTMLHeadingElement

Атрибуты

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

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

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

Избегайте использования нескольких элементов <h1> на одной странице

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

Примечание: Использование нескольких элементов <h1> во вложенных элементах разделов было разрешено в старых версиях стандарта HTML. Однако это никогда не считалось хорошей практикой, а теперь не соответствует требованиям. Больше информации об этом в статье There Is No Document Outline Algorithm.

Старайтесь использовать один элемент <h1> на странице и вложенные заголовки без пропуска уровней.

Примеры

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

Следующий код показывает все уровни заголовков в действии.

html
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>

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

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

html
<h1>Элементы заголовков</h1>
<h2>Краткое содержание</h2>
<p>Обычный текст...</p>

<h2>Примеры</h2>
<h3>Пример 1</h3>
<p>Обычный текст...</p>

<h3>Пример 2</h3>
<p>Обычный текст...</p>

<h2>Смотрите также</h2>
<p>Обычный текст...</p>

Проблемы доступности

Навигация

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

Неправильно:

html
<h1>Заголовок уровня 1</h1>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>

Правильно:

html
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</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 Живот

Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.

Маркировка разделов содержимого

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

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

Примеры секционированного содержимого

html
<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Основная навигация</h2>
    <!-- Элементы навигации -->
  </nav>
</header>

<!-- Содержимое страницы -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Вторичная навигация</h2>
    <!-- Элементы навигации -->
  </nav>
</footer>

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

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

Specification
HTML Standard
# the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

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

BCD tables only load in the browser

Смотрите также