Заголовки в html

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

  1. навіщо взагалі потрібне грамотне використання заголовків в верстці?
  2. яка правильна ієрархія заголовків в HTML?
  3. скільки і яких заголовків має бути на сторінці?
  4. а якщо заголовок картинкою?
  5. чи потрібен title заголовку?

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

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

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

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

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

Специфікації говорять наступне:

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

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

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

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

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

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


дотримуйся чітку ієрархію вкладеності заголовків

Скільки і яких заголовків має бути на HTML сторінці?

Чітких будь-яких правил в специфікаціях або рекомендаціях від пошукачів немає. Деякі гуру рекомендують дотримуватися такої схеми:

Такий порядок має сенс: h1 - це тема сторінки (статті), тому повинен бути один (це особливо важливо при пошукової оптимізації). У статті може бути кілька підтем, як правило в рамках однієї теми їх небагато, тому заголовків другого рівня трохи на сторінці. І так далі з іншими.

Може виникнути питання: як бути зі сторінками анонсів новин (статей), де по ієрархії має бути багато заголовків другого рівня? У таких випадках використання заголовків залишається на розсуд верстальника: зробити багато заголовків другого рівня або пропустити один-два рівня. У мене в пріоритетах дотримуватися ієрархію, тому у мене буде багато заголовків другого рівня.

Розглянемо кілька прикладів використання заголовків на веб сторінках:

Використання заголовків на сторінці опису товару

На головних сторінках сайту основний заголовок прийнято вважати назву компанії або сайту. Тому часто можна зустріти сайти, де на головній сторінці логотип є заголовком першого рівня:

Якщо заголовок картинкою

Іноді для заголовків дизайнери використовують красиві (нестандартні) шрифти. Якщо вирішено було робити їх картинками, тоді за допомогою CSS ховаємо зображення в фон. Текст заголовка дублюємо текстом (для пристроїв не підтримують CSS, голосових браузерів і в деякій мірі для пошукових роботів) і ховаємо його (текст). Така ж техніка застосовується для логотипу на головній:

Детальніше про техніку Новомосковський в статті «Підміна тексту зображенням».

Чи потрібен атрибут title заголовку?

Атрибут title призначений, щоб дати користувачеві додаткову (розширену) інформацію про об'єкт. Має сенс використовувати даний атрибут для тих заголовків, коли дійсно є чим доповнити і title дасть додаткову корисну інформацію користувачеві. Таке використання атрибутів title зробить сайт більш зручним і зрозумілим, а на це звертають увагу і пошукові роботи. З іншого боку, повсюдне використання атрибута title, які не несуть додаткове корисної інформації можуть негативно позначитися на зручності і позиціях в ведучих пошукових систем. Уяви собі, ти використовуєш голосової браузер, який тобі прочитав заголовок. Тобі здалося цього мало і ти просиш прочитати і title. Що ти подумаєш про розробників сайту, якщо вміст title виявиться ідентичним тексту заголовка? Тому використовувати атрибут title (як і взагалі будь-який інший елемент чи атрибут) потрібно обдумано.

Наприклад візьмемо сторінку, з описом товару, яку використовували вище:

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