Заголовки в HTML

Загалом у розпорядженні 6 різних тегів для вставки заголовків - h1, h2, h3, h4, h5, h6 (h скорочене від англ. heading - заголовок). Кожен із них має певну вагу (важливість): h1 — має найбільшу важливість, h6 — найменшу. А ось як ці заголовки правильно використовувати — одна із найспірніших тем. Тепер спробуємо розібратися у деяких спірних моментах.

Навіщо взагалі потрібне правильне використання заголовків у верстці?

По-перше, це дає можливість швидко зорієнтуватися на сторінці, на якій найчастіше море інформації. Це як у журнальній статті, швидко пробігаючи очима по заголовках, ти відразу наголошуєш на чому варто зупинитися. Правильне використання тегів заголовків дасть можливість не тільки візуально орієнтуватися на сторінці (цього можна досягти використовуючи будь-які теги спільно з таблицями стилів), але й дасть можливість так само впевнено знаходити потрібне людям з обмеженими можливостями, які використовують голосові браузери та пристрої читання Брайля. Плюс не забуваємо, що не всі пристрої добре підтримують каскадні таблиці стилів (наприклад, мобільні пристрої). А ще існують пристрої та плагіни, які дозволяють швидко переміщатися документом — наприклад, заголовками у opera.

По-друге, пошуковим роботам буде простіше працювати зі сторінкою, простіше виділити головне та другорядне, а значить більше шансів потрапити в топ.

По-третє, чітка логічна структура документа — крок до підвищення якості, зрозумілості, доступності інформації, це крок до нового рівня надання інформації — Семантичний веб.

Яка правильна (рекомендована) ієрархія заголовків?

Специфікації свідчать таке: Заголовки сторінці повинні мати чітку ієрархію за рівнями, тобто. h2 слід слідувати після h1, h3 після h2 і т.д. Пропуск рівнів у послідовності заголовків може створити враження, що структура документа була належним чином продумана чи певні заголовки були обрані їхнього візуального виконання, а чи не їх значення.

Google говорить практично те саме. Не радимо:

• використовувати теги заголовків там, де більше підійшли б теги <em> або <strong>
• безладно перемикатися від заголовків одного розміру до іншого
• засмічувати сторінку зайвими заголовками
• використовувати заголовки тільки для стилізації тексту без визначення структури сторінки.

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

Вивчивши специфікації, рекомендації пошукових систем, а також затятих захисників семантичного HTML, можна підбити підсумки:

• використовувати заголовки тільки там, де дійсно заголовки
• дотримуватись чіткої ієрархії заголовків (h2, слід за h1. h3 після h2 і т.д.).
• бажано не порушувати чітку послідовність рівнів
• бажано, щоб перший заголовок (за кодом) на сторінці був h1
• не слід невпорядковано перемикатися від заголовків одного розміру до іншого, дотримуйся чіткої ієрархії вкладеності заголовків.