Header Tag (теги заголовків, Heading Tags) — це HTML-теги від H1 до H6, які структурують текст сторінки за рівнями важливості: H1 — головний заголовок, H2 — розділи, H3 — підрозділи й далі вглиб. Вони будують логічну ієрархію контенту, полегшують читання людині й допомагають Google зрозуміти структуру сторінки.
Простими словами: заголовки — це зміст книжки, розкладений прямо в тексті. H1 — назва, H2 — глави, H3 — параграфи всередині глав. За ними і людина, і робот бачать скелет сторінки, не читаючи все підряд.
Що таке Header Tag і навіщо він потрібен
Заголовки поділяють «стіну тексту» на логічні блоки, і це працює одразу на кількох рівнях. Читач сканує сторінку по підзаголовках і швидко знаходить потрібне. Google за тими самими тегами розуміє, які теми головні, а які — вкладені, і краще зіставляє контент із запитами. А програми екранного доступу використовують заголовки для навігації незрячих користувачів.
До речі, назви «Header Tag», «Heading Tag», «H2 Tag» чи «H3 Tag» означають те саме сімейство тегів H1–H6 — це синоніми, а не різні сутності.
Ієрархія H1–H6
- H1 — головний заголовок, один на сторінку, її основна тема.
- H2 — назви ключових розділів.
- H3–H6 — підрозділи всередині розділів, від важливіших до дрібніших.
Головне правило — не «стрибати» через рівні заради розміру шрифту: після H2 має йти H3, а не одразу H4. Розмір задають стилями CSS, а теги відповідають за зміст і структуру.
Синтаксис і приклад коду
Заголовки різних рівнів оформлюють відповідними тегами:
<h1>Догляд за кросівками</h1>
<h2>Як чистити</h2>
<h3>Шкіряні моделі</h3>
<h3>Текстильні моделі</h3>
Приклад
Довга стаття-інструкція без підзаголовків — суцільне полотно, яке ніхто не дочитує. Розбийте її на H2 за етапами й H3 за деталями всередині кожного — і сторінка стає зручнішою для читача, а Google легше витягує з неї окремі блоки для розширених сніппетів.
Часто плутають з…
- Тег
<header>— це структурний блок «шапки» сторінки (лого, меню), а не заголовок тексту. Схожа назва, різні задачі. - Title — заголовок у вкладці браузера й сніппеті; він у
<head>і не є частиною ієрархії H1–H6.
Питання та відповіді
Скільки рівнів заголовків існує?
Шість: від H1 до H6. На практиці зазвичай вистачає H1–H3, глибші рівні потрібні лише в дуже структурованих документах.
«Heading Tag», «H2 Tag», «Header Tag» — це різні речі?
Ні, це назви того самого — тегів заголовків H1–H6. H2 Tag просто вказує на конкретний рівень усередині цієї ієрархії.
Чи можна пропускати рівні заголовків?
Небажано. Стрибок з H2 одразу на H4 ламає логічну структуру для Google і скрінрідерів. Рівні мають іти послідовно.
Хочете чітку структуру заголовків під SEO? Приведемо контент у порядок — аналіз контенту та SEO-копірайтинг.
Схожі терміни: H1 Tag, Title, Meta Description, HTML.
