Several new tags or elements have been added in HTML5. The <header> tag is one of them. It is used as header of one or more sections or as a header of the document. HTML5 <header> element should be used as a container of introductory contents like <h1> – <h6> tags, table of contents, search form, logo etc. with or without navigational links. More than one <header> tag can be used in a HTML5 document and it is generally placed at the beginning of the document or <article> tag.

Important points need to be remembered:

  • <header> and <head> tags are completely different.
  • A <header> tag can’t be placed within <footer> or <address> tag. Also a <header> element can’t be placed within another <header> element.

Web browser support:

HTML5 <header> tag is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support this element.

There are few HTML5 <header> tag examples given below:

Below the <header> tag is used as document header.

<header>
    <h1>This is the heading of the page</h1>
    With some supplementary information
</header>

Below the <header> element is used as article header.

<article>
    <header>
        <h1>Title of this article</h1>
        By S Ghosh
    </header>
    Contents of the article
</article>

S Ghosh

One Response to The HTML5 <header> tag

  1. Denice Lowman posted a comment on August 28, 2014 at 12:36 am  

    This website was… how do you say it? Relevant!! Finally I’ve found something which helped me.

    Many thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>