HTML5 header Element

Jakob Jenkov
Last update: 2014-06-15

The HTML5 header element is used to semantically mark the header section of a page, or of individual parts of the page. For instance, a page containing a list of blog posts or articles may have a header section for the whole page, and a header section for each blog post / article.

Here is a diagram illustrating where the header section of a HTML5 page is normally located:

The header section of an HTML5 page.

Here is how it could look in HTML code:

<html>
<body>
    <header>
        <div>
            Logo, logo text, top navigation links etc.
        </div>
    </header>
</body>
</html>

Remember that the header element is a semantic element. It does not have any special look. You can still style it using CSS though, as you can with a div element.

Also remember, that being a semantic element you do not have to put a header element into your page. The header element is intended to be used by future intelligent browsers (maybe) and web crawlers etc. but there is no guarantee about how these software components will use these elements. Only the future will tell.

header Elements in article Elements

An article element can also have a header section, which could be enclosed in a header element too. Here is a diagram illustrating article elements with header sections:

The header section of article elements in an HTML5 page.

Here is how it could look in HTML5 code:

    <html>
    <body>
        <header>
            <div>
                Logo, logo text, top navigation links etc.
            </div>
        </header>
    
        <article>
            <header>
                Title, author, rating buttons etc. related to this article.
            </header>
            <p>
                Article text...
            </p>
        </article>
    </body>
    </html>

Next: HTML5 hgroup Element

Tweet
	Jakob Jenkov