<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>
на странице и вложенные заголовки без пропуска уровней.
Примеры
Все заголовки
Следующий код показывает все уровни заголовков в действии.
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>
Пример страницы
Следующий код показывает несколько заголовков с содержимым под ними.
<h1>Элементы заголовков</h1>
<h2>Краткое содержание</h2>
<p>Обычный текст...</p>
<h2>Примеры</h2>
<h3>Пример 1</h3>
<p>Обычный текст...</p>
<h3>Пример 2</h3>
<p>Обычный текст...</p>
<h2>Смотрите также</h2>
<p>Обычный текст...</p>
Доступность
Навигация
Обычный метод навигации для пользователей программ чтения с экрана — это переход от заголовка к заголовку для быстрого ознакомления с содержимым страницы. Из-за этого важно не пропускать уровни заголовка. Это может создать путаницу, так как человеку, который использует такой способ навигации, может быть непонятно, где находится отсутствующий заголовок.
Неправильно:
<h1>Заголовок уровня 1</h1>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
Правильно:
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
Вложенность
Заголовки могут быть вложены в подразделы, чтобы отразить структуру содержимого страницы. Большинство программ чтения с экрана могут создавать упорядоченный список всех заголовков на странице, что может помочь человеку быстро определить иерархию содержимого:
-
h1
Жуки-
h2
Этимология -
h2
Распределение и разнообразие -
h2
Эволюцияh3
Поздний палеозойh3
Юрский периодh3
Меловой периодh3
Кайнозойский период
-
h2
Внешняя морфология-
h3
Головаh4
Рот
-
h3
Туловищеh4
Переднегрудьh4
Птероторакс
-
h3
Ноги -
h3
Крыла -
h3
Живот
-
-
Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.
- MDN Understanding WCAG, Guideline 1.3 explanations
- MDN Understanding WCAG, Guideline 2.4 explanations
- Headings • Page Structure • WAI Web Accessibility Tutorials
- Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
- Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
- Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
- Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0
Маркировка разделов содержимого
Другим распространённым методом навигации для пользователей программ чтения с экрана является создание списка секционированного содержимого и его использование для определения разметки страницы.
Разделы содержимого могут быть размечены с помощью комбинации атрибутов aria-labelledby
и id
, с кратко описывающим назначение раздела значением. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.
Примеры секционированного содержимого
<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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h6 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support