Иерархия заголовков. Взгляды

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

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

Screen Reader demonstation

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

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

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

То что 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>

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

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

Заключение

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

Комментарии

Ваши комментарии (9)

  1. akella at Декабрь 07, 2007, 17:30 says:

    Дополню еще тем что при использовании мобильной версии от google. В самом верху появляется ссылка table of contents — для навигации по заголовкам.

    Такая версия отдается в мобильном гмейл по умолчанию m.gmail.com

  2. Artem.Chertov at Декабрь 07, 2007, 19:41 says:

    @ akella: ага. Странно, что мобильные браузеры не имеют такой встроенной ф-ии. А вообще, навигационное оглавление должно быть по стандартам доступности для мобильных устройств ;)

    Спасибо за комментарий! ;)

  3. Vitaly Harisov at Декабрь 12, 2007, 12:10 says:

    h2 не может быть вложен в h1.

  4. Artem.Chertov at Декабрь 24, 2007, 11:11 says:

    @Vitaly. Конечно :) Я имел ввиду семантическую валидацию.

  5. tapazukk at Январь 21, 2008, 1:14 says:

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

  6. Artem.Chertov at Январь 21, 2008, 1:38 says:

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

  7. SelenIT at Май 11, 2009, 11:11 says:

    Если в проекте уже невозможно реализовать правильную иерархию, а «Missing Heading» недопустим, можно прибегнуть к множественной вложенности: …
    Смысловой значимости эта конструкция, конечно, не несет, но, успешное прохождение валидации дает ей право на существование.

    Пардон, это с каким доктайпом она «успешно проходит валидацию»? В HTML3.2—5 и, соотв-но, XHTML1.0 — облом-с…

  8. Artem.Chertov at Май 11, 2009, 12:28 says:

    @SelenIT, а я выше уже в 4-м комментарии ответил Виталику Харисову — я имею ввиду семантическую валидацию.

  9. PatrickBut at Апрель 25, 2016, 22:28 says:

    mh airfare airports near winnemucca nv united airlines flight arrivals heathrow airport.mxd download united airlines flight to brazil united airlines full flight flights world airport sochi airlines flying to iceland american airlines flight weather cancellation policy airfares on sale now
    airfare sin jkt flights bne to mel cork airport delta airlines flights lax cheap flights lviv ukraine cheap tickets az flight xfinity on demand cheap domestic air tickets nz airfare more expensive on weekends flights from gpt to atl gym airlines discount tickets guthrie southwest airlines wyoming southwest airlines historical fares flights update manchester
    cheap airline tickets to aguascalientes mx buy tickets online pompeii airports lake tahoe cheapest flights out of omaha cheap airline tickets buffalo ny airline qc vfr flight information zz airlines cheap tickets sfo to lax hotel oasis mumbai online booking airport ifixit flights udaipur to delhi
    airlines cyber southwest airlines flight services hzg airport flights overhead airports near pcb fl defence hotel reservation service contact southwest airlines flights ft lauderdale airline search and seizure flight search bot cheap tickets stomp airport jc2 flight information alaska airlines

Оставить комментарий

Add comment





(можно использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>)