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>

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

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

Comments

[erik]

I have heard mixed reviews of the Dive into... series. From what I understand it may not be the best reference.

[Lèse majesté]

@espais: Where did you hear these reviews? Do you have a link to one of them negative ones?

[erik]

@Lèse: I can't place it to anything more than heresay at this point. I'm pretty sure I saw it on one of the SE sites in the past...but right now I have no sources.

[Yahel]

@espais bizarre, since all of the references I can find to it in Webmasters and SO are not only positive, but typically highly upvoted. stackoverflow.com/search?q=%22dive+into+html5%22 , webmasters.stackexchange.com/search?q=%22dive+into+html5%22

[erik]

@Lèse: yea, since i really can't back up my comment then i'll respectfully withdraw it

[Lèse majesté]

@espais: Well, that doesn't necessarily mean you're wrong. If you do find a link with specific criticisms of the series at some later point, please do post it.

[Lèse majesté]

There's actually nothing "official" about W3Schools. It's a misleading name, since they're not affiliated with or endorsed by the W3C in any way.

[Yahel]

indeed, see w3fools.com for a detailed take down of how terrible W3Schools is.

[Keith Groben]

I thought this q&a site would have a few more constructive users. You guys seem a bit haughty.

[Yahel]

It has nothing to do with haughtiness, and nothing to do with a desire to be mean, and everything to do with a desire to see misinformation like this quashed. Too many people think w3schools is an authoritative, accurate source, and its extremely damaging to the quality of web development. The whole point of the stackexchange sites is to provide accurate, quality answers, and to push down and correct answers that are inaccurate, incorrect, or misleading.

[Matt]

Thanks Lèse. Could you provide a reference for your note about appropriate use of the 'header' element? I'm interested to read more about this.

[Keith Groben]

Question then. Do heading tags of lower numerical value ie: H1, show a higher priority than a heading tag of higher numerical value ie: H3? If your answer is yes, as the World Wide Web Consortium declares: w3.org/TR/html401/struct/global.html#h-7.5.5, then it is clear that you oppose the source, and not the answer. And a right answer came from a source that you disagree with, but you pushed down the answer because of your disposition.

[Yahel]

@Matt no problem. This isn't to say that there might not be issues with doing this. Two come to mind. First, this can be a bit weird for CSS, but its managable. But more importantly, this could be hazardous for SEO, as there's a fairly well established Conventional Wisdom that one should only have one <h1> on your page, and that anything else dilutes the ability of crawlers to decipher your site. But I'm no SEO guru, so I can't comment on that.

[Matt]

Actually, your answer completely ignored my question and answered a question which was not asked. My question clearly stated 'If I'm using this methodology...' This portion was even in bold to ensure the question was clear. I would assume this is the most likely reason your response was voted down.

[Raynos]

@KeithGroben I have to back everyone else up. W3Schools is a horribly wrong website and it defiantly does not help the web development community.

[Keith Groben]

Never did I defend the validity of W3Schools, nor promote it. It would be helpful for everyone if you all could site examples and references of why it is so horrible. Again, I am not defending it, I could care less. just seems a little redundant now.

[Lèse majesté]

@Matt: I'm mostly basing this on the wording of the HTML5 spec, which calls header "a group of introductory or navigational aids". This and the fact that the specs for h1-h6 don't require them to be nested in a header (and include many examples of them used directly in the section they're a part of) suggests to me that it's unnecessary. This sentiment is echoed by both Oli Studholme and Remy Sharp of HTML5 Doctor.