HTML5 header tag

Recently, we have seen a growing interest in HTML 5 and its 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 element is what we’ll be covering in this post. We’ll talk about when to use it, when not to use it, its must haves and must not haves. Ready? Let’s dive straight in.

So you’re used to seeing

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 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 element doesn’t introduce a new section but is the head of a section. You should also note that the element should not be confused with the element.

Where would I use the 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.

The most important heading on this page

With some supplementary information

An important point to note is that you are not restricted to using one element per site. You can use multiple headers, each of which will then become the for that section of the document. You could therefore have…

Title of this article

By Richard Clark

‘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 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 typically contains at least (but not restricted to) one heading tag (

Styling the

One short point I’d also like to cover is that in order for the majority of browsers to render the 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 browsers 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.