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