Etiqueta aside HTML5: Sección con contenido no relacionado

Repaso a la etiqueta aside HTML5 que define una sección de la web donde el contenido no tiene que estar necesariamente relacionado con el contenido principal de la web.

Generalmente suelen ser barras laterales o sidebars de una web (Plugins sociales, publicidades…).

Dentro de la etiqueta aside podemos meter la etiqueta section para declarar otras secciones de la web.

Sintaxis de la etiqueta aside HTML5

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

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

<aside>

</aside>

Podemos ver como aside tiene sus etiquetas de apertura y cierre, el código que se encuentre entre ambas se considerará perteneciente a una sección no necesariamente relacionada con el contenido principal de la web.

Código de ejemplo de la etiqueta aside HTML5

Os pongo un código de ejemplo para apreciar su funcionalidad e iteracción con otras etiquetas:

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

<aside>

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

</aside>

Tal y como muestro en el ejemplo la etiqueta aside HTML5 agrupa una sección de noticias relacionadas de una web. Entre las etiquetas que agrupa se encuentran: