--- title: '

–

: HTML элементы заголовков секций' slug: Web/HTML/Element/Heading_Elements translation_of: Web/HTML/Element/Heading_Elements ---

HTML элементы <h1>–<h6> представляют собой 6 уровней заголовков секций. <h1> это наибольший заголовок и<h6> - наименьший

Категории контента Поток контента, заголовок контента, явный контент.
Разрешенный контент Фразированное содержание.
Пропуск тега {{no_tag_omission}}
Разрешенные родители Любые елементы которые принимают Содержание потока; не используй как дочерний {{HTMLElement("hgroup")}} елемент, сейчас он устарел
Разрешенные роли ДМИП {{ARIARole("tab")}}, {{ARIARole("presentation")}}
DOM интерфейс {{domxref("HTMLHeadingElement")}}

Атрибуты

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

Атрибут align устаревший; не используйте его.

Примечания к использованию

Примеры

Все заголовки

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

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

Вот результат этого кода:

{{ EmbedLiveSample('Все_заголовки', '280', '300', '') }}

Пример страницы

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

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

Результат кода:

{{ EmbedLiveSample('Пример_страницы', '280', '480', '') }}

Проблемы доступности

Навигация

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

Не делай

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

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

Содержание раздела маркировки

Другим распространенным методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.

Содержимое секционирования можно пометить, используя комбинацию aria-labelledby и {{htmlattrxref("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>

В этом примере технология чтения с экрана объявила бы, что есть два {{HTMLElement("nav")}} разделы, один называется «Основная навигация», а другой - «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придется расследовать каждый nav содержание элемента, чтобы определить их назначение.

Характеристики

Характеристика Статус Коментарий
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} {{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} {{Spec2('HTML4.01')}}

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

Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите  https://github.com/mdn/browser-compat-data  и отправьте нам запрос на извлечение.

{{Compat("html.elements.h1")}}

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