HTML 5 Blog Layout / Markup

Question

I'm creating a WordPress theme in HTML 5 which is relatively new to me. I've read up on it and I read things that seem to contradict one another or differing opinions. One of the big things is where and when to use the <header> tag. I've heard 3 different things:

1. Anywhere that contains <nav>
2. Only once around your logo and main navigation
3. At the top of <article>

I've also heard different things about where and when to use <section> but the general consensus seemed to be that it was option so I've left it out.

From my understanding is that <nav> should only be used for Main Navigation items and not for footer links or pagination so I've only wrapped my <nav> around my necessary links at the top for Utility Navigation and Main Navigation.

Headers are my biggest concern. From my understanding every <article> should have a <h1> tag to give that article a main descriptive title. But I also have 2 <h1> tags outside my <main> content area as a generic banner title and to describe the current Category. I'm just not sure what the best practice is when it comes to Headings and Blogs especially to how Search Engines will interpret a markup that has nothing but Heading 1 Tags...

Review Guidelines

I'd be very grateful if somebody could review my markup and let me know how I could improve it to better fit HTML 5 standards. At the same time though I would like to see some kind of documentation to back your review up because of the many differing opinions that I've run into while researching the HTML 5 standard.

Below I've listed my markup, here's a link to JSFiddle since it has a nice save feature.

<div id="utilityNav">
    <nav id="utility">
        <ul>
            <li><a href="#">Nav Item</a></li>
            <li><a href="#">Nav Item</a></li>
            <li><a href="#">Nav Item</a></li>
        </ul>
    </nav> <!-- id="utility" -->
</div> <!-- id="utilityNav" -->

<div id="headerWrapper">
    <header id="mainHeader">
        <div id="logo">
            <a href="#"><img src="logo.png" /></a>
        </div> <!-- id="logo" -->

        <nav id="mainNav">
            <ul>
                <li><a href="#">Nav Item</a></li>
                <li><a href="#">Nav Item</a></li>
                <li><a href="#">Nav Item</a></li>
            </ul>
        </nav> <!-- id="mainNav" -->
    </header> <!-- id="mainHeader" -->
</div> <!-- id="headerWrapper" -->

<div id="bannerWrapper">
    <div id="banner">
        <h1>Top Level Page Title - Generic</h1>
    </div> <!-- id="banner" -->
</div> <!-- id="bannerWrapper" -->

<div id="contentWrapper">
    <aside id="sidebar">
        <div class="widget">
            Widget Stuff
        </div>

        <div class="widget">
            <ul class="categories">
                <li><a href="#">Sub Nav Item</a></li>
                <li><a href="#">Sub Nav Item</a></li>
                <li><a href="#">Sub Nav Item</a></li>
            </ul>
        </div>
    </aside> <!-- id="sidebar" -->

    <div id="content">
        <h1>Category Title</h1>
        <div id="breadcrumbs">
            <a href="#">Home</a> > <span>Category</span>
        </div> <!-- id="breacrumbs" -->

        <div id="subCatWrapper">
            <ul>
                <li><a href="#">Sub Cat Item</a></li>
                <li><a href="#">Sub Cat Item</a></li>
                <li><a href="#">Sub Cat Item</a></li>
            </ul>
        </div> <!-- id="subCatWrapper" -->

        <main id="postWrapper">

            <article>
                <h1><a href="#">Post Name</a></h1>
                <p>Post Excerpt Here...</p>
                <a href="#">Read More ></a>
            </article>

            <article>
                <h1><a href="#">Post Name</a></h1>
                <p>Post Excerpt Here...</p>
                <a href="#">Read More ></a>
            </article>

            <article>
                <h1><a href="#">Post Name</a></h1>
                <p>Post Excerpt Here...</p>
                <a href="#">Read More ></a>
            </article>

        </main> <!-- id="postWrapper" -->

        <div id="pagination">
            <span class="page-numbers">1</span>
            <a href="#">2</a>
            <a href="#">3</a>
        </div> <!-- id="pagination" -->

    </div> <!-- id="content" -->
</div> <!-- id="contentWrapper" -->

<div id="footerWrapper">
    <div id=footerLinks">
        <div class="col">
            <ul>
                <li><a href="#">Footer Nav Item</a></li>
                <li><a href="#">Footer Nav Item</a></li>
                <li><a href="#">Footer Nav Item</a></li>
            </ul>
        </div>

        <div class="col">
            ...
        </div>

        <div class="col">
            ...
        </div>
    </div> <!-- id="footerLinks" -->

    <footer id="mainFooter">
        <p id="copyright">&copy;</p>

        <div id="social">
            <ul>
                <li><a href="#">Facebooks</a></li>
                <li><a href="#">Tweeters</a></li>
                <li><a href="#">Dem Googles</a></li>
            </ul>
        </div> <!-- id="social" -->
    </footer> <!-- id="mainFooter" -->
</div> <!-- id="footerWrapper" -->

This is really just an outline of how I see the layout going.

Answer 1

From the three things you heard about header use, none is correct. And the use section is not necessarily optional. Depending on the kind of pagination, it can be appropriate to use nav for it.
It’s helpful to read the relevant part of the HTML5 spec for details, but here’s my short and rough summary:

• A HTML5 documents consists of sections (there are sectioning root elements like body and the four sectioning content elements section/article/nav/aside).
• Each section longs for exactly one heading.
  • If you have more than one heading inside of a section, you are creating implicit sections. Better make them explicit!
  • If you don’t provide any heading, this section will get an unlabeled entry in the document outline.
• Each section can have header, footer and address elements (yes, even multiple). These three elements are used to mark everything inside of a section that is not considered part of the section’s main content.

So for a typical page that is part of a website, the first question would be: Which heading to use for the body sectioning root? (Remember, each section would love to get an own heading.) Typically it only makes sense to use the site title here. It especially doesn’t make sense to use the title of this page’s main content, because things like the site-wide navigation and sidebars would be in scope of this heading, which would not be correct.

The main content of that page should also get an own sectioning content element (typically article, if not appropriate, section). If you have several main content sections on the same level, use several section elements. The main element can be used to group all of these main content sections.

Now that your body has a heading and sectioning content elements for the main content, use header and footer to mark anything on the document that is not part of the main flow. Typically these are things that are the same for all pages of the site, like the site-wide navigation, a footer etc.

For content that is related to other content on the page, but not really part of the main content, there is the aside element. If the content is related to the whole page, place it as descendant of body and no other section. If it is related to a certain section, place it as descendant of that section.

---

Taking your code and removing anything not related to sections and the document outline gives this:

<body>

<nav><!-- utilityNav --></nav>

<header>
  <nav><!-- mainNav --></nav>
</header>

<h1>Top Level Page Title - Generic</h1>

<aside><!-- sidebar --></aside>

<h1>Category Title</h1>

<main>

  <article>
    <h1>Post Name</h1>
  </article>

  <article>
    <h1>Post Name</h1>
  </article>

  <article>
    <h1>Post Name</h1>
  </article>

</main>

<footer></footer> 

</body>

Currently the h1 "Top Level Page Title - Generic" would be used as heading for the body section (which represents the whole page). It’s not clear to me what this heading exactly describes (what is a "generic banner title"?). Anyway, if it’s not the site title, you should add one. If your logo is the only element containing the site title, use it as content for a h1 (don’t forget to provide an alt attribute!).
If this first heading is the site title, you might want to add it to the header.

I guess the first nav could also be part of the header.

The footerLinks could probably also be part of the following footer.

It is recommended to use sectioning content elements explicitly instead of relying on implicit sections by using several headings in a section. So use a section for the (currently implicit) section started by the second h1.

This gives:

<body>

<header>
  <nav><!-- utilityNav --></nav>
  <nav><!-- mainNav --></nav>
  <h1>Top Level Page Title - Generic</h1> <!-- assuming that this is the site title -->
</header>

<aside><!-- sidebar --></aside>

<main>
<section>
  <h2>Category Title</h2>

  <article>
    <h1>Post Name</h1>
  </article>

  <article>
    <h1>Post Name</h1>
  </article>

  <article>
    <h1>Post Name</h1>
  </article>

</section>
</main>

<footer></footer> 

</body>