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

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

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

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

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

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

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

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

<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>

Вложение

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

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
• MDN Понимание WCAG, пояснения к руководящему принципу 1.3
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• MDN Понимание WCAG, пояснения к руководящему принципу 2.4
• 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">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
• Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials

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

<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>

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