Заголовки в 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
• не следует неупорядоченно переключаться от заголовков одного размера к другому, соблюдай четкую иерархию вложенности заголовков.