Обязательно прочитайте мой последний пост на эту тему , так как все изменилось.
Следующее переиздано из Tech Times # 157 .
К тому, к чему я должен был привыкнуть в своей работе в качестве так называемого эксперта по веб-технологиям, время от времени мои предположения оказывались неверными. Такие языки, как HTML, иногда могут показаться обманчиво простыми, и даже после многолетнего опыта вам могут быть полезны важные уроки.
Не так давно я усвоил тяжелый урок о структуре заголовков в HTML, который, как я подозреваю, многие веб-дизайнеры также будут удивлены, узнав. В двух словах, структура заголовка не зависит от структуры документа в документах HTML.
Давайте начнем с того, с чем мы все можем согласиться. Если вы пишете HTML-документ, который представляет собой просто статью или другой текст с одним заголовком и несколькими подзаголовками, вы должны использовать <h1><h2> Если ваши подзаголовки сами содержат подзаголовки, они должны быть помечены <h3>
<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h3>Sub-subheading</h3>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet...</p>
Выглядит разумно до сих пор, верно?
Теперь, если это обычная веб-страница, она также будет иметь некоторые элементы навигации и, возможно, некоторый вторичный контент, например, связанные обсуждения на форуме. Каждый из этих разделов страницы будет иметь какой-то заголовок, но какой тег заголовка вы бы использовали?
В какой-то степени ваш ответ может зависеть от того, как вы думаете. Если ваша первая реакция заключается в том, что этот дополнительный контент менее важен, чем статья, вы можете написать что-то вроде этого:
<div class="navigation">
<h2>Navigation</h2>
<ul>...</ul>
</div>
<div class="article">
<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet...</p>
?
</div>
<div class="discussion">
<h3>Related Discussion</h3>
<ul>...</ul>
</div>
Это не было бы необоснованным предположением, и, безусловно, HTML-валидатор W3C был бы совершенно доволен им, но на самом деле это серьезно ухудшает доступность вашего сайта.
В Руководстве по доступности веб-контента W3C 1.0 (WCAG) это разъясняется при обсуждении заголовков разделов :
[I] n HTML, элементы H2 должны следовать за элементами H1, элементы H3 должны следовать за элементами H2 и т. Д. Разработчики контента не должны «пропускать» уровни (например, H1 непосредственно до H3).
Так что на самом деле, поскольку навигация, статьи и связанные с ними обсуждения находятся на одном уровне в структуре страницы (независимо от их относительной важности), все они должны начинаться с заголовков <h1>
Если продолжить этот пример, возможно, на странице будет заголовок или логотип верхнего уровня с названием вашего сайта. Очевидно, это должно быть помечено тегом <h1>
Вот тут-то и наступает сложный урок, который я недавно усвоил. Я начал думать о <div> Следуя этой мысли, у вас может возникнуть соблазн сделать что-то вроде этого:
<h1>My Site</h1>
<div class="navigation">
<h1>Navigation</h1>
?
</div>
<div class="article">
<h1>Article Title</h1>
?
</div>
<div class="discussion">
<h1>Related Discussion</h1>
?
</div>
Поскольку каждый заголовок в приведенном выше коде является заголовком верхнего уровня в <div> , может показаться целесообразным использовать <h1>
Это может быть особенно заманчиво, если вы используете какую-то систему управления контентом, чтобы написать контент статьи отдельно, а затем динамически вставить его на страницу. При работе над статьей в отдельности заголовок статьи является заголовком верхнего уровня, поэтому использование <h1> Однако когда вы размещаете эту статью в контексте полной веб-страницы, это уже не так.
Хотя они могут добавить структуру к вашему документу, которую вы можете использовать при применении стилей с помощью CSS, теги <div> С WCAG 1.0 снова:
Разделы должны быть представлены с элементами заголовка HTML (H1-H6). Другая разметка может дополнять эти элементы для улучшения представления (например, элемент HR для создания горизонтальной разделительной линии), но визуального представления недостаточно для идентификации разделов документа.
Поскольку вспомогательные технологии, такие как программы чтения с экрана, позволяют пользователям перемещаться по документу по его структуре заголовков, ваши заголовки должны формировать разумную структуру, независимую от остальной части разметки документа. Итак, в нашем примере выше каждый раздел страницы должен начинаться с <h2>
<h1>My Site</h1>
<div class="navigation">
<h2>Navigation</h2>
?
</div>
<div class="article">
<h2>Article Title</h2>
?
</div>
<div class="discussion">
<h2>Related Discussion</h2>
?
</div>
Чтобы протестировать структуру заголовков на вашем собственном сайте, вы можете использовать W3C Semantic Data Extractor, чтобы просмотреть схему вашего документа, основываясь на его структуре заголовков.
Вы заметите, что первая страница SitePoint не очень хорошо справляется с этим тестом, поэтому не расстраивайтесь, если ваш сайт тоже не стоит на этом месте. Это просто говорит о том, что я не единственный в SitePoint, кто усвоил этот урок нелегко. Вы можете поспорить, что это будет исправлено в следующем редизайне sitepoint.com!
Обязательно прочитайте мой последний пост на эту тему , так как все изменилось.