Question

I come to you for help once again, Stack Overflow. This time I have trouble understanding the semantics of HTML5 regarding a heading for the main contents of my site. Below are two examples, which one should I use? Perhaps I should go a completely different way?

Edit: I mixed up the code examples!

Example 1

Using this code I get an outline like:

1. Category: foo
2. Blog post #1
3. Blog post #2

Which seems incorrect, since the blog posts are posted under the category?

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>
<div id="content">
    <section id="title">
        <h1>Category: foo</h1>
        <p>Some content</p>
    </section>
    <article>
        <h1>Blog post #1</h1>
        <p>Some content</p>
    </article>
    <article>
        <h1>Blog post #2</h1>
        <p>Some content</p>
    </article>
</div>

Example 2

Using this code I get an outline like:

1. Category: foo
   1. Blog post #1
   2. Blog Post #2

Which seems correct to me, but HTML5 Doctor says that <section> should not be used as a main/primary content wrapper.

Also if I were to use this example, would I exchange <section id="content> with a <div id="content"> if there is no natural heading for the main content (like the index page where all posts are shown)?

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>
<section id="content">
    <header id="title">
        <h1>Category: foo</h1>
        <p>Some content</p>
    </header>
    <article>
        <h1>Blog post #1</h1>
        <p>Some content</p>
    </article>
    <article>
        <h1>Blog post #2</h1>
        <p>Some content</p>
    </article>
</section>

Answer 1

Try using h1-h6 tags the old fashioned way.

<h1>My awesome website!</h1>

<section> 

    <h2>Category: foo</h2>
    <p>Some content</p>

    <article>
        <h3>Blog post #1</h3>
        <p>Some content</p>
    </article>

   <article>
       <h3>Blog post #2</h3>
       <p>Some content</p>
   </article>
</section>

<section>  
    <h2>Category: bar</h2>
    <p>some content</p>

    <article>
        <h3>Blog post #3</h3>
        <p>Some content</p>
    </article>

    <article>
       <h3>Blog post #4</h3>
       <p>Some content</p>
    </article>
</section>     

This is similar to HTML5Doctor’s own example of a <section> containing <article>s.

Technically, you could replace the <h2> and <h3> tags with <h1>, and that would be just as valid. Using h1-h6 has the advantage of maintaining backwards compatibility with older user agents (screen readers in particular).