This article is currently in the process of being translated into Croatian (~1% done).
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!
Ovako to izgleda:
<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
