The header element

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.

Further Reading

Share and Save:
  • Twitter
  • Digg
  • Sphinn
  • Reddit
  • del.icio.us
  • StumbleUpon
  • Technorati
  • Netvibes
  • Facebook
  • Google Bookmarks
  • FriendFeed
  • HackerNews
  • LinkedIn
  • NewsVine
  • Tumblr

26 Responses to “ The header element ”

Comment by Jason Grant at

Some title in this case does not provide any additional semantics to the document, but does add the unnecessary code bloat.

It’s a perfect example where ‘additions’ to the spec have missed the point altogether.

This element is somewhat waste of time essentially.

Comment by ysbreker at

This helps me a lot in getting ready for html5! More please!

(ps. Some minor typo’s in here: ‘beggining’ -> ‘beginning’ and ‘broswers’ -> ‘browsers’)

Comment by Rich Clark at

@Jason I would argue that this does add semantics to the document, you have to consider that you can now specifically target the header of an article or section for example. We also have to consider how in the future this might benefit screen reader software if they could bring up a list of headers in a document or just article headers rather than all headings in a page.

@Antonio, I think Luke has already answered this one but yes that’s possible.

@ysbreker, thanks for spotting those should now be corrected.

Comment by Omar Abid at

I don’t find where this tag can be useful, most of designs today use complex headers that have multiple divs so why limiting our self to , let’s just use the id=”header”

Not really interesting as my point of view

Comment by Rich Clark at

@Omar there is no reason why you can’t use div’s inside the header element so we aren’t limited in that respect. Also you wouldn’t want to use id=”header” as you can use multiple header elements on a page so it wouldn’t validate.

@Alberto I’m sure we’ll do something on nav soon. Also so you’re aware the spec has changed recently to allow nav inside the header element as mentioned in the above post.

Comment by Rich Clark at

@Rob, I would totally agree with that yes, the header element obvisouly adds semantic value rather than have div id=”header”

In fact that sitepoint article was written by Bruce who is also one of the authors on this site. If you check out his ‘Designing a Blog with HTML5′ article on this site you’ll get the same sort of idea – http://html5doctor.com/designing-a-blog-with-html5/

Hope this clears things up.

Comment by Richard Le Poidevin at

@Rich @Rob I think it’s confusing to know where to use this. At first I thought it could be used for the header of the entire document as the spec mentions ‘logos’ etc which usually sit there, But Now I am a little confused as html5doctor article on the footer element (http://html5doctor.com/the-footer-element/) talks about not using the footer element at the bottom of the page and using nav instead – but surely this mirrors the header at the top? Can’t you stick a nav in a header/footer?

Comment by Neha at

Hi,

It is great to know that HTML 5 having the relevant section name and we can style them directly Refrying from stylesheet.

I have the habit to mark the section of the website in the code from where they are starting and ending..I guess by these relevant section name it will make my comment work easy job.

Waiting for more.

Just I am new in HTML 5..curious to know,till know how many browser are supporting HTML5?

Thanks,
Bye

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <b> <blockquote cite=""> <cite> <del datetime=""> <em> <i> <q cite=""> <strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.