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

{{HTMLSidebar}}

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

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

Атрибути

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

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

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

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

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

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

Краще використовувати лише один <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 Черево

Коли заголовки вкладені, то рівні заголовків можуть бути "пропущені" при завершенні підрозділу.

Позначення вмісту розділу

Інший поширений підхід до орієнтування користувачів ПЗ читачів з екрана – утворити список розділення вмісту і використовувати його для з'ясування компонування сторінки.

Розділений вміст можна розмітити за допомогою комбінації атрибутів 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 heading
Дозволені ролі ARIA tab, presentation і none
Інтерфейс DOM HTMLHeadingElement

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
h1
Chrome Full support Yes
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support 4
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes

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