Etiqueta section HTML5: Definir una sección o agrupación

Vamos a ver la nueva etiqueta section HTML5 que sirve para definir una sección o agrupación temática del contenido de una página web.

La agrupación de código en esta etiqueta HTML5 debería contener:

Encabezados h1, h2, h3…
Artículos
Y otro contenido de ser destacado en una sección, por ejemplo noticias relacionadas…

No confundir con la etiqueta nav, nav sólamente contiene enlaces a las diferentes secciones de la web.

Sintaxis de la etiqueta section HTML5

Vamos a ver la sintaxis de este elemento HTML5 extraída de su web oficial:

<section>
<!-- Código HTML -->
</section>

</section>

Podemos ver como section tiene sus etiquetas de apertura y cierre, el código que se encuentre entre ambas se considerará perteneciente a una sección o contenido temático de la web.

Dentro de etiqueta section pueden ir otras como por ejemplo:

Código de ejemplo de la etiqueta section HTML5

Os pongo un código de ejemplo interactuando con las etiquetas header, footer y article:

<section>
	<header><h2>Noticias relacionadas</h2></header>
	
	<article>
		<header>
			<h1>Noticia 1</h1>
			<p>Texto descriptivo 1</p>
		</header>
		<footer>
    		    <p>Publicado el XXX del XXX de XXX</p>
  		</footer>
	</article>

	<article>
		<header>
			<h1>Noticia 2</h1>
			<p>Texto descriptivo 2</p>
		</header>
		<footer>
    		    <p>Publicado el XXX del XXX de XXX</p>
  		</footer>
	</article>
</section>

<header><h2>Noticias relacionadas</h2></header>

<h1>Noticia 1</h1>

<p>Texto descriptivo 1</p>

</header>

<p>Publicado el XXX del XXX de XXX</p>

</footer>

</article>

<h1>Noticia 2</h1>

<p>Texto descriptivo 2</p>

</header>

<p>Publicado el XXX del XXX de XXX</p>

</footer>

</article>

</section>

Explico el código superior:

El código superior es un ejemplo de cómo podríamos hacer un apartado de noticias relacionadas.
Todo el código está bajo la etiqueta section HTML5.
Cada noticia relacionada sería un article con sus header y footer.