From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/html/element/heading_elements/index.html | 242 +++++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 files/ru/web/html/element/heading_elements/index.html (limited to 'files/ru/web/html/element/heading_elements/index.html') diff --git a/files/ru/web/html/element/heading_elements/index.html b/files/ru/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..36a44b736e --- /dev/null +++ b/files/ru/web/html/element/heading_elements/index.html @@ -0,0 +1,242 @@ +--- +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. +
    2. h2 Распределение и разнообразие
      3. +
    3. h2 Эволюция +
        +
      1. h3 Позний полиозой
        2. +
      2. h3 Юрский период
        3. +
      3. h3 Меловойский период
        4. +
      4. h3 Кайнозойский период
        5. +
      +
      4. +
    4. h2 Внешняя морфология +
        +
      1. h3 Голова +
          +
        1. h4 Рот
          2. +
        +
        2. +
      2. h3 Туловище +
          +
        1. h4 Передгрудь
          2. +
        2. h4 Пиероторакс
          3. +
        +
        3. +
      3. h3 Ноги
        4. +
      4. h3 Крыла
        5. +
      5. h3 Живот
        6. +
      +
      5. +
    +
    2. +
+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ + + +
-- cgit v1.2.3-54-g00ecf