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.
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 Antonio at
So will it be possible to have divs inside of the header element with proper rendering and validation?
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 Luke at
@Antonio:
Proper rendering will, of course, depend on the rendering engine. As for validation, though, it should work. I did a very simple mockup and checked it at http://validator.w3c.org and it checked out okay.
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 Alberto Calvo at
I’m waiting for the nav explanation. Still wondering why isn’t valid to add a nav inside a header or footer.
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 Rimantas at
Sounds like some guys just need a spec with one or two elements in it: div and/or span. Well…
Comment by Rob at
@Rich,
To your understanding of the spec, would you agree that the element is appropriate to be the header of a whole document as stated in Sitepoint’s article: http://www.sitepoint.com/article/html-5-snapshot-2009/2/
It seems you say just that at the beginning of this article, but some clarification would be awesome!
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 Carsonified » 23 Essential HTML 5 Resources at
[...] Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element [...]
Comment by 23 Essential HTML 5 Resources - Programming Blog at
[...] Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element [...]
Comment by CaoInteractive Blog » 23 Essential HTML 5 Resources at
[...] Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element [...]
Comment by 23 Usefull HTML 5 Resources For You | Webmaster 9 at
[...] Headers in HTM 5 [...]
Comment by 24 Resources para HTML5 » CSS no Lanche at
[...] Headers in HTML 5 – Tutorial sobre o elemento header do HTML 5. [...]
Comment by 24 Resources para HTML5 | Blog — Lúmen Web Solutions at
[...] Headers in HTML 5 – Tutorial sobre o elemento header do HTML 5. [...]
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 Rich Clark at
@Richard, you can use the header multiple times within a document (as you can nav, article, footer etc). Re using nav instead of a footer that depends on what you are using it for see http://html5doctor.com/nav-element/
Currently the spec doesn’t allow a nav to be included inside a footer element.
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
Comment by 23 Essential HTML 5 Resources « Vleerkatcreations at
[...] Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element [...]
Comment by Rich Clark at
Hi Neha
There are many aspects to HTML5 that are supported at different levels, in terms of the new elements I’d recommend you read this post from Remy about getting them to work in IE and FF2.
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
Rich
Comment by 25+ Great HTML 5 Resources to Get You Started | tripwire magazine at
[...] Headers in HTM 5 [...]
Comment by 25+ Great HTML 5 Resources to Get You Started | huibit05.com at
[...] Headers in HTM 5 [...]
Comment by html5 web resources start learn there « Just Press it! at
[...] Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element [...]
Comment by 穿過雲層оО Rudy | HTML5学习资源整理 at
[...] general resource on HTML 5 HTML 5 Doctor A good article from HTML 5 Doctor on the Header element Headers in HTM 5 A useful article from HTML 5 Doctor on the Video element Video elements A tutorial on how to build [...]