HTML5 header tag

The <header> element is a bit cryptic as it can be acclimated in altered kinds of ways. Firstly you charge to apperceive 

that the <header> element do not acquaint a new area – it is the arch of an absolute section. Secondly you have to not abash it with the aspect – it is two altered 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.

Try this example

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