Recently, we have seen a growing interest in HTML 5 and it’s adoption by web professionals. Within the HTML 5 specfication we can see that there have been a significant number of new tags added, one of these the <header> element is what we’ll be covering in this post. We’ll talk about when to use it, when not to use it, it’s must haves and must not haves. Ready? Let’s dive straight in.
So you’re used to seeing
<div id="header">on a large majority of sites that you visit, well now with HTML 5 that isn’t required anymore we can add some more semantic value with the <header> element.
What does the element represent?
According to the spec the header element represents
a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.
It is important to note that the <header> element doesn’t introduce a new section but is the head of a section. You should also note that the <header> element should not be confused with the <head> element.
Where would I use the <header> element
Well the obvious place to start would be at the beginning of your page. We we can start with something like this that includes your primary page heading.
<header>
<h1>The most important heading on this page</h1>
</header>
An important point to note is that you are not restricted to use one <header> element per site, you can use multiple headers, each of which will then become the <header> for that section of the document. You could therefore have…
<header>
<h1>The most important heading on this page</h1>
</header>
<article>
<header>
<h1>Title of this article</h1>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
Also note the use of two <h1>’s within that piece of html, this is perfectly valid in HTML 5 (and HTML 4) but will cause issues with accessibility, so we advise caution if you have a large number of articles on a page. We will cover this in more detail in another post.
What is required in the <header> element
We now know that we can have multiples headers in a page but what are the must have’s within the element in order for it to validate?
In short, a <header> typically contains at least (but not restricted to) one heading tag (<h1> – <h6>). You can also include the <hgroup> element but we’ll discuss that more in another post (read more about the hgroup in the spec). The element can also contain other content within the document flow such as a table of contents, logos or a search form. Following a recent change to the spec you can now include the <nav> element within the <header>.
Styling the <header>
One short point I’d also like to cover is that in order for the majority of browsers to render the <header> element as a block level element you will need to explicitly declare it as a block in your CSS like so:
header { display:block;}In fact you will need to do this for the majority of block level elements in HTML 5. Just as soon as broswers make it default we’ll let you know so you can save those precious bytes from your CSS. In the meantime be sure to keep up with what has or hasn’t been implemented in layout engines on this wiki.
Conclusion
In summary <header> give us some great added semantic value in order to describe the head of a section.
