The header element

by .

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 <header> 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

<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>
<p>With some supplementary information</p>
</header>

An important point to note is that you are not restricted to using 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>
    <p>With some supplementary information</p>
</header>

<article>
<header>
    <h1>Title of this article</h1>
    <p>By Richard Clark</p>
</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 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.

Conclusion

In summary <header> give us some great added semantic value in order to describe the head of a section.

Further Reading

100 Responses on the article “The header element”

Jason Grant says

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.

Antonio says

So will it be possible to have divs inside of the header element with proper rendering and validation?

ysbreker says

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

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

Luke says

@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.

Rich Clark says

@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.

Omar Abid says

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

Alberto Calvo says

I’m waiting for the nav explanation. Still wondering why isn’t valid to add a nav inside a header or footer.

Rich Clark says

@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.

Rimantas says

Sounds like some guys just need a spec with one or two elements in it: div and/or span. Well…

Rob says

@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!

Rich Clark says

@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.

Richard Le Poidevin says

@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?

Rich Clark says

@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.

Neha says

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

穿過雲層оО Rudy | HTML5学习资源整理 says

[...] 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 [...]

Elemento header - HTML5 | L Cardoso says

[...] HTML5 Doctor W3C bb_keywords = 'HTML5'; bb_bid = '40565'; bb_lang = 'pt-BR'; bb_name = 'custom';bb_limit = [...]

Anthony says

I think it’s also important to note that this tag is NOT required. Your examples using just a single h1-h6 element within the header group are a bit lacking from what the W3C shows to be the use. http://dev.w3.org/html5/spec/sections.html#the-header-element. Please forgive me if I missed a reply that addressed this.

It appears that their intended use for the header tag is as a grouping tool, and not a sectional element. The examples that they list don’t show a single h1-h6 element, but several different structural elements combined. Somewhat like using a fieldset when making forms.

Richard Clark says

@anthony – you’re right, they are for a grouping tool. When this article was written we didn’t have articles on hgroup or time etc so didn’t want to introduce those concepts before we’d told readers about them. Probably time to update this article to reflect that.

Let’s HTML5 | Peter Mikhael says

[...] Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element [...]

Bill says

With multiple header elements on the page, how would you target the ‘main’ header (in the old div id=”header” sense)?

header id=”header” seems wrong…

Richard Clark says

@Bill, seems to me there are 3 options available for that.

1. Add a class or id to your ‘main’ header
2. Add an aria landmark role (banner) and use an attribute selector for styling
3. Use CSS combinators to target the header element that is a a direct descendant of the body (if it is)

Which one you choose will depend on your project.

Anonymous says

This site is very interesting, but Richard, for the love of God, please learn how to use the term “its” correctly. I apologise for being the literary correctness fascist here, but seeing things like “and it’s adoption” on every article really kills the professionalism.

    Richard Clark says

    @anonymous – You’re absolutely right. My grammar isn’t the greatest and I can only apologise. However, you’ll be pleased to know we do have a copy editor correcting all our before publishing articles now. He’s also working through the early articles (like this one) to make sure they’re correct as well. Hope that helps.

Paul says

Arguing semantics ftw.

keith says

How would I separate the header from the page and make it look really profssional i’m a little lost.

Thomas Byttebier says

The spec says the header element is also to be used for navigational aids. So why not an example with the nav element inside the masthead? It’s pretty common, right? I noticed html5doctor.com puts the main navigation outside of the page’s header. Why?

Adrian Neilson Hall says

This is a small point. Throughout the series of articles on the new sectioning elements you have a common piece of text:
“An important point to note is that you are not restricted to use one element per site, you can use multiple headers, each of which will …”

This would read much better as:
“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…”

Changes:
* ‘restricted to use’ > ‘restricted to using’ ;
* new sentence after ‘element per site’ ;

Susan Ottwell says

You mention putting logos in header elements. The W3C validator does not allow that.
Element logo not allowed as child of element header in this context. (Suppressing further errors from this subtree.)
I have a header element with a logo element containing a linked image and a nav element.

Rich Clark says

@Keith – I’m not sure I follow, can you explain?

@Thomas – purely personal preference, it gives a bit more flexibility for us to change the design of the site and move the navigation wherever we like.

@Adrian – noted, thanks for pointing that out, we’ll look to get them all resolved.

@Susan – I’m not sure where you’ve got the logo element from, it doesn’t exist?

Susan Ottwell says

Yeah, I finally figured that out. I really don’t know where I got the idea there was a logo element.

eric says

i have a pretty complex header. can someone advise me on how to best structure this:

Bla Bla Bla

Praise
bla bla bla

twitter
bla bla bla

one
two
three
four

here’s the image for reference:
dl.dropbox.com/u/4481830/mockup-v1.png

eric says

oops. forgot to use “code”… sorry about the double post:

i have a pretty complex header. can someone advise me on how to best structure this:

Bla Bla Bla

Praise
bla bla bla

twitter
bla bla bla

one
two
three
four

here’s the image for reference:
mockup url

bluefoot says

Good article. I guess browsers that not supports HTML5 would treat this as any block element, like a div.

HTML5 equating to MORE markup? - DesignersTalk says

[...] sure that Header and Footer are designed to be used multiple times on a page in articles. See here: The header element | HTML5 Doctor It doesn't NEED to be used, but it can – and if you're going down the semantics route, then [...]

Nikhail venkat says

hai…good to see about these discussions happening. I learnt a lot from the above discussions and I want to know more about header element. Say suppose i use multiple header elements in a page and i want to style each header element differently then how would i do that. ???

eric says

@Nikhail:

you can use ID’s or classes if you need to. otherwise you can use special css selectors, like > and + to target specific ones.

Nikhail venkat says

@eric:

thank you for the time you took to answer me. But if i can use id and class then why can’t i use “div” element instead of header element??.And what is css selector.???

eric says

@Nikhail:

using the new semantic elements reportedly will help with search engines either presently or in the future, to break down your page and figure out what’s what. also, it makes your code a little more readable. even if you do use classes. remember: html5 does not make classes and id’s and divs obselete. they are still useful.

what’s important is deciding when to use what. consequently, planning out the skeleton of your site becomes a lot more work than it used to be. before it was just div this, div that, let the classes sort it all out. but now, you have to think, “would a div work here, or is there a better element that would describe its content?”

when i said “selectors” above, that was a bad choice of word, but let me try to explain:

(1) using the “>” character in css means that you are selecting a direct child in the html. in other words, p > a, would select all a tags inside of a p tag, but it would NOT select an a tag that was inside of a span, in the p. sorry if that’s confusing xD. instead of using the css, “header#header{}”, which is redundant (sometimes. sometimes it’s actually a good idea), you could just do this: “#container > header”. this means it will only select header elements that are direct children of the container element.

(2) “+” is a little easier to explain. it basically selects the sibling element of whatever you specify. for example, if there’s a p tag that directly follows an h2 tag, then you can say “h2 + p {}” to only target p tags that follow h2.

finally, i’d like to point out that it’s perfectly fine to use classes and id’s with your html5 tags. just make sure they describe the content, that they’re necessary, and that they serve their purpose (to lighten the amount of css you need to code).

Nikhail venkat says

@eric:
thank you very much…i got it..

Rino70 says

I discover this site for case and i think that is the best site about html5. It explains in the best way the sintax of the language. Excuse me for my bed english. Thank you

Introduction to html5 says

[...] Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element [...]

Rick Lowes says

As per @Susan actually, why isn’t there a logo element? That is something that’s on most websites, and it would be more semantic than img or background-image…and it could also then be syndicated as well could it not?

researching HTML5 « ART342~S11 says

[...] <header>  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. An important point to note is that you are not restricted to using one <header> element per site. You can use multiple headers, each of which will then become the <header> for that section of the document. http://html5doctor.com/the-header-element/ [...]

thecat says

What if I have a section and it has only one header as in <h1> … do I just use <h1> </h1>? Or:

<header>
<h1> </h1>
</header>

Or do I use <header> only if I have more than 1 header element?

eric says

@thecat: it depends on the complexity of the section. The more complex it is, the more necessary the header element becomes. For example, a title of the webpage (logo, navigation, search etc.) should have a header because it encompasses the whole page. A mere section or article, however, are generally pretty simple (though not always) and generally don’t need a header element. An h1 would do fine in those cases. However, it’s up to your discretion. A header certainly wouldn’t hurt; it would just add to your markup, which is something you may not want.

derry says

HTML5 semantic resources so needed right now – many websites state they are html5 but in fact are still full of random divs and in no order whatsoever and with no additional value: Actually including my own site is still lacking because I got the order of Section and Article wrong!

Keep up the good work!

stephen says

Alright, so header is used to define that a section of a website belongs at the top of the document… But isn’t that essentially styling information? Sure the header won’t actually style itself or anything, but the location of elements in pages is something I’d always thought was css’s job, while html should just define the content of the information.

Jarrod Placide-Raymond says

@Stephen, I believe that header, and other tags such as ‘section’ and ‘aside’, etc are more descriptions of content than they are styling information. CSS’s job is to style the look of the content, but the description of content was formerly XML’s job, hence the bland combination that led to XHTML 4.01.

It is now merely given to us in the HTML5 toolkit, if you wish to describe it as such.

Pankaj says

This is nice article,

Now every one know about html5. but I am little bit confuse about header tag. you are saying that we can use header tag for group of headings or section headings. but we have hgroup tag for group of headings and If we have about us section with page title and paragraphs, We are using h1 for page title so we really want header tag outside the h1 tag? because h1 already have more importance.

What I am thinking that for hole page we can use header tag for page header that will contain logo, navigation, top links, etc. and If we have any big section inside that page, like table or any thumb listing we can use header tag for that table or thumb listing head that will contain heading of that section, sorting, pagination, etc.

Is this right? help me to get right direction.

Thanks,
Pankaj Chavan

Derp says

What is the point? At any level? Why not just go with a div block with id=”header”?
I can tell just about as much as from that as I can from an element called “header”

Jamal says

From a semantic point of view, html5 tags are beneficial. In my situation, I have over half of my visitors that use IE6-IE8. Out of these, 20% have JavaScript disabled so using html5 shiv or html5 shim is not a reasonable option for me. Not sure why so many have JS disabled but I don’t believe in using a no-script message.

So in my situation html4 is my best option. I love how html5 handles video and audio so I do use it and just have it fall back to flash for the other browsers.

Too early to adopt html5 fully for my right site now but in a few years I am going to love using the canvas and serving all my audio and video using html5.

Peter says

Derp: It’s easier for a machine to understand a header tag.

Peter says

Who is actually looking at the header-tags? The browsers or browsing engines like google?

Ray says

Nice information.

The header tag seems to be completely useless for us developers. Perhaps it is good for search engines?

It only creates an extra task to put an extra pointless element around already fully woking elements.

Hope the header tag will become to be a tag that nobody but geeks use. I hate to dig around in messy code.

Long live the real “id=header” header.

Mikes says

Why even look at the spec? They made these new tags for semantics. That means use them however you want. In a few years we will let convention be the spec. Years ago no one expected tables to be used for layouts. Then it became convention. Divs with id’s and classes took over. Now they are offering basically Divs with different names so they mean a little more when reading code. Then google and everyone else will adapt.

Tim says

I would agree with other comments that header is a waste. Also, being that you can add more than one header element does NOT make it more semantic. If you only used one header element, then yes, it may help. However, from a code perspective it seems unnecessary and possibly confused (or misspelled by auto-completion editors). Why not just use a class called header as usual? It works and it’s a standard. I also never use id’s, only classes.

Josh says

Geez some of these comments. Yes you can make everything a DIV and style it as you want, the idea is just to provide some context. Also web developers should be aware of accessibility concerns to webpages.

If you have a screen-reader, they are smart enough to handle things like and in an appropriate manner, whereas a huge page of DIV soup it is forced to read everything which most people don’t care about unless they are trying to navigate. Imagine coming to this site to read this article and having to sit there while it reads every piece of text in the headers and sidebars before getting to article content.

Tim says

@Josh “Imagine coming to this site to read this article and having to sit there while it reads every piece of text in the headers and sidebars before getting to article content.”

Which you want it to because otherwise you’re not going to know how to navigate the site.

Join the discussion.

Some HTML is ok

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.