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

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

* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* 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` (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`, чтобы определить его назначение.

* Using the aria-labelledby attribute (en-US)
* Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials
Спецификации
------------

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `<p>`
* `<div>`
* `<section>`