HTML5 Semantics - H1 or H2 for ARTICLE titles in a SECTION

Question

It's my understanding (based from this chapter of Dive into HTML5: http://goo.gl/9zliD) that it can be considered semantically appropriate to use H1 tags in multiple areas of the page, as a method of setting the most important title for that particular content.

If I'm using this methodology, and I have a SECTION which I've assigned an H1 of 'Articles', should I use H1 or H2 to define the titles for ARTICLEs in that SECTION? This is a bit confusing to me as the article titles are the most important heading for their ARTICLE, but are also 'children' of the SECTION's title.

Example code:

<section class="article-list">
  <header>
    <h1>Articles</h1>
  </header>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="201-02-01">Today</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-31">Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-30">The Day Before Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>
</section>

Answer 1

Pilgrim isn't alone in contending this.

According to Jeremy Keith's HTML5 for Web Designers, you can use multiple <h1>s in a document without ruining the document summary, as long as they are nested within discrete semantic sectional tags.

Quoting directly from the eBook (which I purchased from iBooks)

So far, the new sectioning content isn’t giving us much more than what we could do with previous versions of HTML. Here’s the kicker: In HTML5, each piece of sectioning content has its own self-contained outline. That means you don’t have to keep track of what heading level you should be using—you can just start from h1 each time:

<h1>An Event Apart</h1> 
    <section>
        <header>
            <h1>Cities</h1>
        </header>
         <p>Join us in these cities in 2010.</p> 
        <section>
            <header>
                <h1>Seattle</h1>
            </header>
            <p>Follow the yellow brick road.</p> 
       </section>
        <section>
            <header>
                <h1>Boston</h1>
            </header>
            <p>That’s Beantown to its friends.</p> 
        </section> 
        <section>
             <header>
                   <h1>Minneapolis</h1>
             </header>
             <p>It's so <em>nice</em>.</p> 
         </section>
     </section> 
     <small>Accommodation not provided.</small>

(Sample code also from the book, page 73)

Answer 2

I would tend to agree with Mark Pilgrim's interpretation. If you're enclosing your article inside of an article element, then you can start over again with an h1 heading for the article.

In the HTML5 spec, articles are supposed to be treated as an independent, self-contained part of the page. You should be able to transplant the article element as is into another page without re-formatting the headings.

If article headings had to be a continuation of the document heading hierarchy, then when you drop the article directly under a body tag, you'd need to go to h1, but if you dropped it under nested sections, you'd have to change it to h3/h4/h5/etc., depending on where you place it.

In fact, any time you create a new section or article, you should go back to h1, as the following are identical:

<article>
  <h1>Meta Data</h1>
    <h2>Data Warehousing</h2>
    <h2>On the Web</h2>
      <h3>Dublin Core</h3>
      <h3>XFN</h3>
      <h3>Microformats</h3>
      <h3>RDFa</h3>
</article>

and:

<article>
  <h1>Meta Data</h1>
  <section>
    <h1>Data Warehousing</h1>
  </section>
  <section>
    <h1>On the Web</h1>
    <section>
      <h1>Dublin Core</h1>
    </section>
    <section>
      <h1>XFN</h1>
    </section>
    <section>
      <h1>Microformats</h1>
    </section>
    <section>
      <h1>RDFa</h1>
    </section>
  </section>
</article>

As a side note, if your header is just a heading element (e.g. h1) and nothing else, then you don't need to wrap it in a header element.

Answer 3

While the article titles of your page are important, generally the top level heading of the page defines the content of the page. Sometimes it's the name of the article, and sometimes, as you show is the title of a listing of articles.

<h1>My Very Interesting Articles</h1>

This heading defines the whole page as 'interesting articles'. Then each article is listed but have a lesser heading level.

Answer 4

The official w3schools answer to the use of heading tags on a page is as follows: H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.