Отображение элементов HTML5 в классы и идентификаторы HTML, но как насчет тегов заголовка? - PullRequest
Новая
       16

Отображение элементов HTML5 в классы и идентификаторы HTML, но как насчет тегов заголовка?

2 голосов
/ 12 августа 2010

на работе мы начинаем следовать этому конкретному руководству по медленной реализации вкусностей HTML5:

http://oli.jp/2008/html5-class-cheatsheet/

Основная идея использования структуры HTML5, но с HTML4-элементами div с классами иИдентификаторы вместо.Мы знаем о сценариях Javascript, которые могут генерировать требуемые элементы HTML5 (поэтому IE на самом деле может их стилизовать, иначе это не так!), Но мы стремимся сделать все наши сайты доступными, работать на IE6 + и не требовать Javascriptчтобы быть функциональным.

Мы уже начали использовать тип документа HTML5, потому что использование атрибутов data- полезно для нас.(Статья Джона Резига http://ejohn.org/blog/html-5-data-attributes/)

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

... если это так, каково влияние большого количества h1, h2, h3 на страницу для таких вещей, как поисковые системы и программы чтения с экрана? Мы используем тип документа html5, но на самом деле не используем новую статью, нижний колонтитул, навигационные теги, но намереваются использовать HTML5-способ иерархии заголовков.

Кто-нибудь может помочь устранить эту проблему?

1 Ответ

1 голос
/ 12 августа 2010

Если вы не используете фактические элементы секционирования, вам не следует «сбрасывать» значение до h1. То есть было бы целесообразно следующее: 

<h1>Site title</h1>
<div class=article>
  <h2>The most interesting article ever!</h2>
  <div class=section>
    <h3>Foo</h3>
    <p>Bar
  </div>
  <div class=section>
    <h3>Baz</h3>
    <p>Quux
  </div>
</div>

С фактическими элементами, вы можете использовать либо 

<h1>Site title</h1>
<article>
  <h2>The most interesting article ever!</h2>
  <section>
    <h3>Foo</h3>
    <p>Bar
  </section>
  <section>
    <h3>Baz</h3>
    <p>Quux
  </section>
</article>

или 

<h1>Site title</h1>
<article>
  <h1>The most interesting article ever!</h1>
  <section>
    <h1>Foo</h1>
    <p>Bar
  </section>
  <section>
    <h1>Baz</h1>
    <p>Quux
  </section>
</article>

Я предлагаю использовать HTML5 Outliner , чтобы проверить, правильно ли вы используете заголовки.

...