АРТЕМ ЧЕРТОВ

Вложенность заголовков довольно изъезженная тема для дискуссии, ей посвящено множество споров и публикаций. Но не смотря на такую популярность, далеко не все верстальщики уделяют этому должное внимание.

Как известно, заголовки делятся на 6 уровней — начиная с самого важного h1, заканчивая наименее логически значимым h6. Вы можете сказать, «это просто — как в книге!». Нет. Не смотря на то, что в книге или газете, в целом, та же система, проводить параллель между печатными изданиями и сайтом не стоит. Попробуйте представить, к примеру, интернет-аукцион в виде книги…

В этой статье, я бы хотел рассмотреть разные взгляды на соблюдение иерархии заголовков в гипертексте.

Стандарты

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

HTML 4.01 Specification

[7.5.5] Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.

WAI 1.0

[Checkpoint 3.5] Use header elements to convey document structure and use them according to specification. [Priority 2]. For example, in HTML, use H2 to indicate a subsection of H1. Do not use headers for font effects.

Techniques for WCAG 2.0

[G141] To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g. h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).

Section 508 Standards

[§ 1194.22 (o)] A method shall be provided that permits users to skip repetitive navigation links.

Практическая сторона

В свете развития текущих технологий, мы имеем огромное количество различных устройств имеющих выход в интернет. Сейчас, не говоря уже о мобильном телефоне, даже у плеера есть доступ в сеть. По мере возможности, создавая продукт, мы должны обеспечить доступность сайта на любом устройстве, независимо от типа и модели. Есть разные способы реализации такой кроссплатформенности, но самым надежным и, в корне, верным является правильная разметка документа. Не мало важная часть этой разметки — рассматриваемые заголовки.

Рассмотрим удобства использования правильной вложенности тегов h*.

«Opera»

В Opera есть возможность навигации по заголовкам. Перемещение реализовано по порядку размещения заголовка на экране (не в коде!). Уровень заголовка не учитывается. Доступно управление с клавиатуры и голосом. Для перехода к следующему заголовку — «S», к предыдующему — «W». Голосом — «Next heading« и «Previous heading».

Стоит отметить, что при навигации происходит не только фокус, но и выделение содержимого в заголовке. Благодаря этому, браузер может прочитать текст или произвести с ним другие манипуляции.

Перемещение по уровню заголовков было в прототипе. И вышло в свет только в одной из бета-версий браузера.

Voice and screen readers

Voice Home Page Reader — полностью голосовой браузер. С заголовками действия те же, что и в текущих версиях Opera, но другие сочетания клавиш. С помощью «H» мы перемещаемся по всем заголовкам на странице. А комбинацией Alt+(1-6) выбираем уровень и перемещаемся только по заголовкам выбранного уровня.

Та же ситуация и со screen readers. Только, иногда, добавляется переход между заголовками еще и алфавитном порядке по первой букве.

Мобильные браузеры

Уже, конечно, большинство мобильных обозревателей поддерживают стили, но все же есть те, что отображают сайт только в текстовом виде. Или пользователь может отключить их загрузку самостоятельно, дабы сэкономить на трафике. Размечая заголовки и выстраивая их иерархию, посетитель будет рад видеть четко структурированную страницу, вместо грубого набора текста или разделов в непонятной последовательности.

Поисковые системы

То что SE индексируют заголовки не так, как обычный текст — естественно и ни для кого не секрет, но подробности этого процесса держатся в тайне. Нельзя быть уверенным в том, что от правильного Outline, позиция страницы в поисковой выдаче изменится. Но, тем не менее, многие уважаемые SEO специалисты рекомендуют использовать практику правильной иерархии заголовков. В стандартной конфигурации ht://Dig значимость заголовков распределена пропорционально:

heading_factor_1: 5
heading_factor_2: 4
heading_factor_3: 3
heading_factor_4: 1
heading_factor_5: 1
heading_factor_6: 0

Трюки

Если в проекте уже невозможно реализовать правильную иерархию, а «Missing Heading» недопустим, можно прибегнуть к множественной вложенности:

<h1>
  <h2>
    <h3>Block title</h3>

  </h2>
</h1>

Смысловой значимости эта конструкция, конечно, не несет, но, успешное прохождение валидации дает ей право на существование.

Проверка иерархии

• Document Outline output, на примере статьи блога, при W3C Markup Validator.
• Semantic data extraction статьи блога, включающее иерархию заголовков. От W3C QA.
• Пользовательский GraseMonkey-скрипт для навигации по заголовкам от Gez Lemon‘а.
• Document Map — FF расширение, отображающее структуру заголовков страницы в боковой панели браузера. От James Graham

  

Заключение

Правильная иерархия заголовков — шаг к достижению максимальной доступности сайта, и соблюдению веб-стандартов :-).