The section tag

El elemento section es uno de los nuevos elementos que es más difícil de aprender a usar correctamente. Es más general que el elemento <article>, pero tú tienes que tener una sección real en el documento cuando se utiliza el elemento <section>.

Esto significa que siempre debes considerar si podría ser más apropiado o no utilizar el <nav>, el <aside>, el <header>, el <footer>, o el elemento <article> antes de usar realmente el elemento <section>. (Algunos de estos elementos podrían ser nuevos para usted, hay capítulos discutiendo todos ellos).

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>

Como puedes ver, esto agrega varias líneas de marcado al documento y algunos prefieren el menor marcado posible. Por suerte para ellos, no es necesario utilizar el elemento de sección dentro del artículo, pero a menudo crea un esquema de documento más correcto.
Como el elemento de sección divide el contenido en secciones, es importante recordar que todos los elementos de sección deben ir seguidos de una etiqueta de encabezado - si esto no tiene sentido semánticamente, entonces no debes usar el elemento de sección (considerar el uso de uno de los otros nuevos elementos HTML5 semánticos o tal vez ningún elemento en absoluto?).

Algunos podrían ceder a la tentación de usar la etiqueta de sección como gancho de estilo para, por ejemplo, pullquotes, pero resistan. Hay elementos más apropiados para usar para este propósito en lugar del elemento de sección, por ejemplo, el elemento aside.

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