The header element

by .

Recently, we have seen a growing interest in HTML5 and its adoption by web professionals. Within the HTML5 specification we can see that there have been a significant number of new elements 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.

Updated 15/12/2105 by Doctor Steve

So you’re used to seeing

<div id="header">

on a large majority of sites that you visit, well now with HTML5 that isn’t required anymore we can add some more semantic value with the <header> element.

What does the element represent?

According to the HTML spec the header element represents

 …introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

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>
    <h2>Title of this article</h2>
    <p>By Richard Clark</p>
</header>
    <p>...Lorem Ipsum dolor set amet...</p>
</article>

Also note the use of  <h2>, within in the <article> element, to represent a 2nd level heading, while it is valid in HTML 5 (and HTML 4) to use multiple <h1>‘s this will cause issues with accessibility, so the HTML spec advises

…the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1h6) to convey document structure.

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>). 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 legacy browsers (ostensibly IE <9) 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 Structural elements in HTML5 if you want support IE <9. Support data for Structural elements in Browsers is available (caniuse.com). Details about the mapping of structural element semantics in browsers is available from HTML5Accessibility.com.

Adding ARIA to <header>

The HTML spec advises the following, for the <header> element:

Allowed ARIA role attribute values: banner role (default – do not set) or presentation.

Allowed ARIA state and property attributes:Global aria-* attributes

Any aria-* attributes applicable to the allowed roles.

Note: the banner role is only mapped to <header> when the element is not within a <section> or <article> element, i.e. when <header> is scoped to the <body> element. This mapping has been implemented in browsers to avoid exposing banner role semantics inappropriately.

Conclusion

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

Further Reading

103 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

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

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

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

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

  • […] Headers in HTML 5 – Tutorial sobre o elemento header do HTML 5. […]

  • […] Headers in HTML 5 – Tutorial sobre o elemento header do HTML 5. […]

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

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

  • Rich Clark says:

    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

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

  • […] 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 […]

  • […] Lien vers l’article original en anglais. […]

  • […] 5 structure — HTML 4 and XHTML 1 to HTML 5 (@boblet)HTML5 Doctor’s articles on header, section, aside, nav, footer@boblet’s articles on div, section, and article; nav, aside, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] 5 structure — HTML 4 and XHTML 1 to HTML 5 (@boblet)HTML5 Doctor’s articles on header, section, aside, nav, footer@boblet’s articles on div, section, and article; nav, aside, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] 5 structure — HTML 4 and XHTML 1 to HTML 5 (@boblet)HTML5 Doctor’s articles on header, section, aside, nav, footer@boblet’s articles on div, section, and article; nav, aside, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

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

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

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

  • […] mich fortzubilden Hab aber gerade was gefunden, was eventuell mit Deinem Problem zu tun hat, auf http://html5doctor.com/the-header-element/ : One short point I’d also like to cover is that in order for the majority of browsers […]

  • […] Headers in HTM 5 – Un buen artículo de “HTML 5 Doctor” sobre el elemento Header. […]

  • […] 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…

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

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

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

  • keith says:

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

  • 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’ ;

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

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

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

  • […] Header: un bloque de contenido que representa la cabecera de la web. […]

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

  • […] post better explains the first issue I had: http://html5doctor.com/the-header-element/ Read "Styling the <header>" "One short point I’d also like to cover is […]

  • 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

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

  • […] 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?

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

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

  • Kevin says:

    I just read about optimizing browser rendering and it says using tags in css is very inefficient. In that case it seems to be better to use some instead of the new tag . Or, of course, use some classes for the different headers, if you use several ones.
    http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

  • Manu medina says:

    Very good explication, if you want to find more information about the html5 layout in Spanish you can check this presentation:

    http://www.maspixel.com/2011/04/charla-formativa-sobre-html5/

  • 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

  • psywalker says:

    Hi! We have translated this article. Here’s a link to the translation (http://css-live.ru/articles/element-header.html). Please, place it in the end of your article.

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

  • […] HTML5 came out, using a H1 for every section was a way of dividing your content. Super easy, no thinking […]

  • hassan says:

    Is not hgroup been deprecated from HTML5? This article should be updated.

  • Alex says:

    Thank you for this an all the other element posts! I’m working on a talk for my local web people meet up extolling the importance of using semantic elements well and these have been invaluable.

    One editorial note: You have a misspelling of caniuse.com above as “canisue.com”. Cheers.

  • Leave a Reply to 23 Recursos esenciales para entender HTML5 | HTML5 Games

    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.