Semantic HTML5 section tags:

The header tag

The <header> element is a bit ambiguous as it can be used in different kinds of ways. Firstly you need to know that the <header> element do not introduce a new section – it is the head of an existing section. Secondly you must not confuse it with the <head> element – it is two different elements!

Here is what it looks like:

<header>...</header>

So can you have two <header> elements on the same page? Sure you can! Imagine you have three blog entries on a single page; well they can all have a <header> section. Multiple articles on one page? They all have their own <header> element.

Using the flour-article, this means that the <div> element we previously used to divide the headline and author from the rest of the content can now be replaced by the <header> element.

<article>
	<header>
		<h1>All About Flour</h1>
		<p class="teaser">Wheat flour is the backbone of the baked goods we love.</p>
		<p class="byline">by Jane Doe</p> 
	</header>

	<div id="content">
		<h2>The Two Types of Wheat</h2>
…

When using the <header> element you should always have one heading tag (<h1> - <h6>), but you can have multiple. You can also use the <hgroup> element, which I will explain later on. Lastly, you can also have other "header" relevant content such as the byline, publication date, table of contents etc.

What you have learned

<header> is a new semantic HTML5 element
The <header> is used inside a section (not necessarily at the top of your document)
Therefore, you can have multiple <header> in the same document

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!