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 section tag
The section element is one of the new elements that it is the hardest to learn to use correctly. It is more general than the <article> element, but you still have to have an actual section in your document when you use the <section> element.
This means, that you should always consider whether or not it might be more appropriate to use the <nav>, the <aside>, the <header>, the <footer>, or the <article> element before actually using the <section> element. (Some of these elements might be new to you, there is chapters discussing all of them).
Let’s take a look at how you could use the <section> element, to divide the different parts of the flour article into sections:
</header> <section> <h2>The Two Types of Wheat</h2> <p>There are two …</p> </section> <section> <h2>All-Purpose Flour</h2> <p>All-purpose … </p> </section> ... <footer>...</footer> </article>
As you can see, this adds several lines of markup to your document and some prefer as little markup as possible. Luckily for them, you do not need to use the section element inside the article, but it often creates a more correct document outline.
As the section element divides your content into sections, it is important to remember that all section elements must be followed by a heading tag - if this doesn't make sense semantically, then you should not be using the section element (consider using the one of the other new semantic HTML5 elements or perhaps no element at all?).
Some might give in to the temptation of using the section tag as a styling hook for e.g. pullquotes, but resist it. There are more appropriate elements to use for this purpose instead of the section element, e.g. the aside element.
What you have learned
- The <section> is not supposed to be used as a styling hook
- If you do need a styling hook, use a <div>
- The <section> element should always be your last choice – make sure there is no other element that is more relevant
- Do use it to divide a lengthy terms and conditions page into numbered sections
- Use the <sections> element to groups of content, e.g. a collection of articles on a news site
- Don’t use the <section> for quotes and sidebars – use the <aside> element instead
- If your <section> isn’t directly followed by a heading element (<h1> to <h6>), then the <section> element is not what you need
- You can nest sections inside article and articles inside sections
- The <section> element is a block-level element