Dave Woods - Freelance Web Design Warwickshire

HTML5 Header Element

This article in the HTML5 series covers the explanation and usage of the <header>  element.

If you’re new to HTML5 then you might want to start at the following link which will give you an overview and a simple template to get you started: HTML5 Tutorial.

Header element as the page header

The first place that I use the HTML5 <header> element is for the page header which might contain a  logo, navigation and any other consistent elements that might be considered the page header:

<header>
<a href="/" class="logo"><img src="images/graphic-logo.gif" alt="Company Name"></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

Note: I’ve also included the HTML5 <nav> element within this example which I’ll cover in another article.

Header element as the article header

When using the <header> element you aren’t limited to the number of times you can use it so I’d also use it to markup the header for the actual document content.

<header>
<h1>Article heading</h1>
<p class="date">Posted on 3rd December 2010</p>
<p class="author">By Dave Woods</p>
</header>

The hgroup element

Currently in the HTML5 draft specification, the hgroup is mentioned and can be used to group a number of heading elements:

<header>
<hgroup>
<h1>Article heading</h1>
<h2>The sub heading for this article</h2>
</hgroup>
</header>

Personally, I’m not sure why we would really need this extra hgroup element for the rare cases that two headings follow on from each other directly in the source code or what extra semantic value this could add to the document? I have a feeling this will probably get dropped before the final specification for HTML5 is released.

Styling the header element

It’s important to remember that browsers don’t currently implement any display information via CSS for the new HTML5 elements so for any element that should display as a block element, you’ll need to specify it as such.

header { display: block; }

Personally, I take it one step further as demonstrated in the HTML5 CSS Reset article and use that to specify the display for these new elements straight away before I start using:

article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section { display: block; }

You can either use that and apply it to your own CSS reset file or simply download the one that’s available at the above link and use that stylesheet.

3 comments on “HTML5 Header Element

  1. Victor Jonsson

    A nice quick article on HTML5. I’m still wrapping my mind around the new tags and where they should appear. The header tag you described was just like I had used it. Containing header graphics, navigation and such before the main content.

    -Victor

  2. Jim Hoskins

    Regarding the need for the hgroup tag, it’s use is almost purely semantic. Consider you were building a tool that generated a hyperlinked outline/table of contents for a page. Well if the h1-h6 are used semantically you can simply find those elements and generate based on those. The h1 would be the document title, h2s would be the top most sections, h3s below that and so on. It works great.

    Then consider the common practice of putting the page/site name in h1, and a tagline in h2 right next to it. Then the tagline would be read as a top level section of the page, grouped with all of the other h2s (if marked up correctly)

    What the hgroup tag does is say “Semanticaly, only consider the most important h* tag in this group. Any less important tags in the hgroup are clarifying the important heading, not defining nested sections below that heading.”

    So in your example, now I have enough semantic information in this document to determine “Article Heading” is denoting a section of the page, but “The sub heading for this article” heading isn’t, it’s merely a subheading for the “Article Heading”

    I hope that clarifies it a bit.

  3. Dave Woods Post author

    Hi Jim, that makes perfect sense for that scenario. I presume that in this case…

    (h1)Wildlife in Africa(/h1)
    (h2)Lions in Africa(/h2)
    (p)Content about lions in africa(/p)
    (h2)Zebras in Africa(/h2)
    (p)Content about zebras in Africa(/p)

    …you wouldn’t use the hgroup though as that would denote that the second heading was less important or relevant to the content that followed and less important the other h2 on the page?

    As a side note, it will also be interesting to see how the search engines start to implement HTML5 elements over the coming years.