The community is working on translating this tutorial into Arabic, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
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
