HTML 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:

Try this example

</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.