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