<h1>–<h6> – елементи заголовків розділів HTML

Елементи HTML від <h1> до <h6> представляють шість рівнів заголовків розділів. <h1> – для розділу найвищого рівня, а <h6> – для найнижчого. Усталено всі елементи заголовків утворюють у макеті рамку блокового рівня, що починається з нового рядка та займає всю ширину, доступну в контейнерному блоці.

Спробуйте його в дії

Атрибути

Ці елементи приймають лише глобальні атрибути.

Примітки щодо застосування

• Заголовкова інформація може використовуватися користувацькими агентами для автоматичного конструювання змісту документа.
• Не використовуйте заголовкові елементи для зміни розміру тексту. Замість цього використовуйте властивість CSS font-size.
• Не пропускайте рівні заголовків – завжди почитайте з <h1>, далі <h2> і так далі.

Уникайте використання кількох <h1> на одній сторінці

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

[!NOTE] Вкладеність кількох елементів <h1> у вкладених розділових елементах була дозволена в старших версіях стандарту HTML. Проте це ніколи не вважалося найкращою практикою, і тепер – неправильно. Більше про це – в Немає алгоритму плану документа.

Краще використовувати лише один <h1> на сторінку і вкладати заголовки одне в одного, не перестрибуючи рівні.

Доступність

Орієнтування

Поширений підхід до орієнтування користувачів ПЗ читачів з екрана – швидкий перехід від заголовка до заголовка, щоб з'ясувати вміст сторінки. У зв'язку з цим важливо не пропускати одного чи більше рівнів заголовків. Це створило б плутанину, оскільки особа, що так орієнтується, може загубитися, не розуміючи, де подівся пропущений заголовок.

Не робіть так:

<h1>Заголовок рівня 1</h1>
<h3>Заголовок рівня 3</h3>
<h4>Заголовок рівня 4</h4>

Краще робіть так:

<h1>Заголовок рівня 1</h1>
<h2>Заголовок рівня 2</h2>
<h3>Заголовок рівня 3</h3>

Вкладеність

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

Якщо є наступна структура сторінки:

<h1>Жуки</h1>
<h2>Етимологія</h2>
<h2>Поширення та різноманітність</h2>
<h2>Еволюція</h2>
<h3>Пізній палеозой</h3>
<h3>Юрський період</h3>
<h3>Крейдяний період</h3>
<h3>Кайнозойська ера</h3>
<h2>Зовнішня морфологія</h2>
<h3>Голова</h3>
<h4>Ротовий апарат</h4>
<h3>Груди</h3>
<h4>Передньогруди</h4>
<h4>Середньогруди</h4>
<h3>Ноги</h3>
<h3>Крила</h3>
<h3>Черево</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
• Розуміння критерію успіху 1.3.1 | W3C розуміння WCAG 2.0
• MDN розуміння WCAG, пояснення Настанов 2.4
• Розуміння критерію успіху 2.4.1 | W3C розуміння WCAG 2.0
• Розуміння критерію успіху 2.4.6 | W3C розуміння WCAG 2.0
• Розуміння критерію успіху 2.4.10 | W3C розуміння 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, аби з'ясувати його призначення.

• Застосування атрибута aria-labelledby
• Підписування областей • Структура сторінки • Підручники з вебдоступності W3C WAI

Приклади

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

Наступний код показує застосування заголовків усіх рівнів.

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

Технічний підсумок

Специфікації

Сумісність із браузерами

Дивіться також

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