Semantic markup for site header, even with outliner

Question

Usually when I code HTML5 documents I use the following syntax:

<header class="site-header">
    <hgroup class="site-brand">
        <h1 class="brand-name">
            Brand Name
        </h1>
        <h2 class="brans-slogan">
            Awesome Slogan
        </h2>
    </hgroup>
</header>
<article>
    <header class="article-header">
        <h1 class="article-title">Article Header</h1>
    </header>
    [... content ...]
</article>

It seemed to be header the right tag for site header, but after reading the spec and outlining this code, I saw two drawbacks

• header tag make its content first level, and article title 2nd
• Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.

What would be the best approach?

Answer 1

Your first problem is that you have two h1 tags. This is NOT proper semantic mark-up. You are correct about the header tag and it would be preferable to put you high level h tags in that area.

That being said, your original question is a design and content architecture problem. If you are going to use an h1 in your article body then you should choose a different tag to use in the header of you page.

The spec says,"The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section."

It does not have to, though. The h1 tag (and title tag) are your main semantic indicies for a page. You do NOT want 2 h1 tags or header tags, but these two tags do not have to go together ... but its nice if you can architecture it that way.

Answer 2

Your usage of header in this example is okay.

However, it's not really needed here. If you only include h1-h6 and hgroup, you don't need to specify that it's a header, because it is already clear by definition. header is useful if you want to include additional content for which it's not necessarily clear that it should belong to the header vs. the main content.

But there is no harm in using header for headings only, so go on with it if you like it, need it for CSS/JS hooks, might include additional header content in the future, etc.

header tag make its content first level, and article title 2nd

I don't understand what you mean by that. The header element doesn't influence the document outline. It's a way to differentiate between introductory content and main content.

Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.

The header element doesn't have to contain a heading. E.g. this example would be fine:

<article>
  <header>I visited Berlin last week and in this post I document what I liked about it.</header>
  <p>…</p>
</article>

The footer element is similar, and for some content both elements could be suitable.

If you'd want to attribute the article author, it would go into a footer.