Заголовки в HTML

Подготовил: Евгений Рыжков Дата публикации: 22.01.2010

У тебя в распоряжении 6 различных тегов для вставки заголовков — h1, h2, h3, h4, h5, h6 (h сокращенное от англ. heading — заголовок). Каждый из них имеет определенный вес (важность): h1 — имеет наибольшую важность, h6 — наименьшую. А вот как эти заголовки правильно использовать — одна из самых спорных тем. Давай попробуем копнуть глубже в тему и ответить на следующие вопросы:

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

Зачем вообще нужно правильное использование заголовков в верстке?

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

Во-вторых, поисковым роботам будет проще работать со страницей, проще выделить главное и второстепенное, а значит больше шансов попасть в топ.

В-третих, четкая логическая структура документа — это шаг к повышению качества, понятности, доступности информации, это шаг к новому уровню предоставления информации — Семантический веб.

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

Спецификации гласят следующее:

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

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

Не советуем:
  • использовать теги заголовков там, где больше подошли бы теги <em> или <strong>
  • беспорядочно переключаться от заголовков одного размера к другому

Не разбрасывайтесь заголовками. Используйте заголовки только там, где они действительно необходимы. Слишком большое количество заголовков на странице дезориентирует пользователя и затрудняет понимание того, где заканчивается одна тема и начинается другая.

Не советуем:

  • засорять страницу лишними заголовками,
  • использовать заголовки только для стилизации текста, без определения структуры страницы.

Изучив спецификации, рекомендации поисковых систем, а так же ярых защитников семантического HTML, можно подвести итоги:

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

Сколько и каких заголовков должно быть на HTML странице?

Четких каких-либо правил в спецификациях или рекомендациях от поисковиков нет. Некоторые гуру рекомендуют придерживаться следующей схемы:

  • h1 — один на странице
  • h2 — 2-3
  • h3 — 4-6
  • и т.д.

Такой порядок имеет смысл: h1 — это тема страницы (статьи), поэтому должен быть один (это особенно важно при поисковой оптимизации). У статьи может быть несколько подтем, как правило в рамках одной темы их немного, потому заголовков второго уровня немного на странице. И так далее с остальными.

Может возникнуть вопрос: как быть со страницами анонсов новостей (статей), где по иерархии должно быть много заголовков второго уровня? В таких случаях использование заголовков остается на усмотрение верстальщика: сделать много заголовков второго уровня или пропустить один-два уровня. У меня в приоритетах соблюдать иерархию, поэтому у меня будет много заголовков второго уровня.

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

Использование заголовков на странице описания товараИспользование заголовков на странице описания товара

На главных страницах сайта основной заголовок принято считать название компании или сайта. Поэтому часто можно встретить сайты, где на главной странице логотип является заголовком первого уровня:

Использование h1 для логотипа

Если заголовок картинкой

Иногда для заголовков дизайнеры используют красивые (нестандартные) шрифты. Если решено было делать их картинками, тогда с помощью CSS прячем изображения в фон. Текст заголовка дублируем текстом (для устройств не поддерживающих CSS, голосовых браузеров и в некоторой степени для поисковых роботов) и прячем его (текст). Такая же техника применяется для логотипа на главной:

<h1>Фирма Рога и копыта</h1>
h1 {
	width: 250px;
	height: 100px;
	background: url(path-to/logo.png);
	text-indent: -9999px; /* прячем текст за пределами заголовка, прием предложен Джеффри Зельдманом */
	overflow: hidden;
}

Подробней о технике читай в статье «Подмена текста изображением».

Нужен ли атрибут title заголовку?

Атрибут title предназначен, чтобы дать пользователю дополнительную (расширенную) информацию об объекте. Имеет смысл использовать данный атрибут для тех заголовков, когда действительно есть чем дополнить и title даст дополнительную полезную информацию пользователю. Такое использование атрибутов title сделает сайт более удобным и понятным, а на это обращают внимание и поисковые роботы. С другой стороны, повсеместное использование атрибута title, которые не несут дополнительное полезной информации могут негативно сказаться на удобстве и позициях в выдачах поисковиков. Представь себе, ты используешь голосовой браузер, который тебе прочитал заголовок. Тебе показалось этого мало и ты просишь прочитать и title. Что ты подумаешь о разработчиках сайта, если содержимое title окажется идентичным тексту заголовка? Поэтому использовать атрибут title (как и вообще любой другой элемент ли атрибут) нужно обдуманно.

К примеру возьмем страницу, с описанием товара, которую использовали выше:

пример использования и не использования атрибута title в заголовках

Выводы

Грамотное использование HTML инструментов — это своего рода искусство. Заголовки тому не исключение. Если хочешь, чтобы твой код был лучше, чем у конкурентов, чтобы твой сайт был на более высоких позициях в выдачах поисковых систем, удели заголовкам больше внимания.

Материалы

Показать комментарии