<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> на одной странице

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

Старайтесь использовать один элемент <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>

Вложенность

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

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 Живот

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

• 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, чтобы определить его назначение.

• Using the aria-labelledby attribute
• Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials

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

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

html.elements.h1

html.elements.h2

html.elements.h3

html.elements.h4

html.elements.h5

html.elements.h6

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

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