The community is working on translating this tutorial into Portuguese, 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".
If you are fluent in Portuguese, then please help us - just point to any untranslated element inside the article and click the translation button to get started. Or have a look at the current translation status for the Portuguese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
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:
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