Тег <h1>–<h6>

Теги <h1>–<h6> (укр. – “заголовок”) у HTML використовуються для визначення різних рівнів заголовків від найбільш важливих до найменш важливих. Існує шість рівнів заголовків: від <h1> (найважливіший заголовок) до <h6> (найменш важливий). Теги заголовків допомагають структурувати контент на сторінці, забезпечуючи логічну ієрархію.

Тег <h1> зазвичай використовується для головного заголовку сторінки або розділу, тоді як <h2> і нижчі використовуються для підзаголовків.

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

Важливість використання заголовків не обмежується візуальним відображенням — пошукові системи також індексують заголовки, використовуючи їх для розуміння структури та змісту сторінки. Тому правильне використання тегів заголовків є важливим для SEO (пошукової оптимізації).

Атрибути

Специфічні атрибути

Теги заголовків <h1>–<h6> не мають специфічних атрибутів.

Глобальні атрибути

Найпопулярніші глобальні атрибути, які використовуються на заголовках:

  • id — унікальний ідентифікатор елемента на сторінці, який можна використовувати для посилань, стилізації або JavaScript-операцій;
  • class — клас, який допомагає стилізувати або групувати елементи;
  • style — атрибут для інлайн-стилізації конкретного елемента;
  • lang — атрибут для вказання мови вмісту елементу;
  • dir — атрибут, який вказує напрямок тексту (наприклад, “ltr” — зліва направо, “rtl” — справа наліво);
  • hidden — приховує елемент від відображення.

Приклад використання:

<h1>Основний заголовок</h1>

<h1 id="main-title" class="primary-header" lang="uk">Основний заголовок</h1>

<h2 class="hidden-header" hidden>Скритий підзаголовок</h2>


Додаткові моменти

  • Теги <h1>-<h6> є парними елементами, тому їх потрібно обов’язково закривати;
  • Важливо дотримуватись ієрархії заголовків для покращення структури контенту, SEO та зручності навігації;
  • Відстані між заголовками, колір та інші властивості можуть бути налаштовані через CSS для досягнення бажаного вигляду.