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

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

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

Категории содержимого Основной поток, содержимое заголовков, явное содержимое.
Допустимое содержимое Фразовое содержимое.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, разрешающий основной поток.
Неявная ARIA-роль heading
Допустимые ARIA-роли tab, presentation или none
Интерфейс 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 и 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
# the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

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

html.elements.h1

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
h1

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.h2

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
h2

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.h3

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
h3

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.h4

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
h4

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.h5

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
h5

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.h6

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
h6

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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