Mapping HTML5 elements to HTML classes and IDs, but what about header tags?

Question

Hello, at work we're starting to follow this particular guide for slowly implementing HTML5 goodies:

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

The basic idea of using HTML5 structure, but with HTML4 divs with classes and IDs instead. We're aware of Javascript scripts that can genearate the require HTML5 elements (so IE can actually style them, otherwise it won't!) but we make a point of getting all our sites to be accesible, work on IE6+ and not require Javascript to be functional.

We've started to use the HTML5 doctype already, because having the power of the 'data-' atributes is useful to us. (ala John Resig's article http://ejohn.org/blog/html-5-data-attributes/)

All of what the first article suggests seems pretty good to us, but one area of confusion is what to do with header tag hierarchy. For each defined block (be it an article, an aside, a footer etc) do we start of the header hierarchy from the top again? So h1, h2, h3... for an article, for example. Then the next article on the page would have h1, h2, h3... then for the footer (if it has headers) then it'll start again h1, h2, h3... and for an aside it'll start again h1, h2, h3...

...if this is the case, what is the impact of having lots of h1, h2, h3 on a page for such things like search engines and screen readers? We're using the html5 doctype, but not really using the new article, footer, nav tags but are thinking of using the HTML5 way of header hierarchy.

Can anyone help clear the mud with this issue?

Answer 1

If you're not using the actual sectioning elements, you should not "reset" to h1. That is, the following would be appropriate:

<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>

With the actual elements, you could use either

<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>

or

<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>

I suggest using the HTML5 Outliner to check if your use of headings looks right.