Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ru/docs/Web/HTML/Reference/Elements/Heading_Elements below:

<h1>–<h6>: заголовки разделов - HTML

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

Примечание: Использование нескольких элементов <h1> во вложенных элементах разделов было разрешено в старых версиях стандарта HTML. Однако это никогда не считалось хорошей практикой, а теперь не соответствует требованиям. Больше информации об этом в статье There Is No Document Outline Algorithm.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4