Etiquetas semánticas header, hgroup, nav, section, article, aside y footer de HTML5

Como ya comentamos, uno de los puntos nuevos de HTML5 es el uso de nuevas etiquetas semánticas que serán usadas para identificar diversas partes de la web.

Bien es sabido que, normalmente, cuando realizamos una web, ésta está dividida en una serie de partes que se repiten de un proyecto a otro: la cabecera, el menú, el cuerpo o el pie, por ejemplo. Esa estructura básica (a grandes rasgos) es prácticamente común a todos los portales e incluso solemos usar los mismos nombres a la hora de identificar las capas.

Como es un sistema que repetimos una y otra vez los desarrolladores, HTML5 lo ha hecho suyo y ha decidido estandarizar este uso creando nuevas etiquetas. Así los div comunes que veníamos usando hasta ahora se sustituyen por esas etiquetas ya que a nivel funcional se comportan exactamente igual. Por tanto les daremos las propiedades que queramos en CSS.

Es importante comentar antes de seguir, que del mismo modo que no hay una única manera de hacer una web, tampoco hay un único modo correcto de implementar las etiquetas. Hay un alto componente subjetivo y de libre interpretación a la hora de estructurar nuestro portal, ya que la valoración del nivel semántico es una tarea propia de cada individuo.

header

La etiqueta header se va a usar para una cabecera, generalmente la cabecera de la página. Sin embargo, no hay nada que impida usarla también para la cabecera de un artículo o de un apartado, por ejemplo. Su sintaxis sería:

<header>
contenido de la cabecera
</header>

hgroup

Los h1, h2, h3, etc. se usan para establecer el grado de jerarquía de los títulos de una web; título, subtitulo, epígrafe, etc. De acuerdo a esto, h1 no se puede usar más de una vez en cada una de las páginas de un site, no porque no se pueda, sino porque perdería su eficacia en torno al SEO. Pero lo cierto es que una página suele tener más de un título, sobre todo cuando hablamos de portales que cargan mucho contenido dinámico, como blogs, revistas, etc.

Pues bien, hgroup permite crear grupos de títulos para que pueda haber más de un h1, h2 y h3 sin que pierdan importancia. Ideal para los listados de artículos que suelen constar de título, subtítulo y una entradilla.

<hgroup>
<h1> título </h1>
<h2> subtítulo </h2>
</hgroup>

nav

Esta etiqueta la usaremos para identificar el menú de navegación del portal. Dentro de ella colocaremos la botonera tal cual lo hacíamos antes, usando preferiblemente listas (ul y ol).

<nav>
contenido del menú
</nav>

section

Cuando vayamos a crear un bloque de contenido específico, usaremos la etiqueta section. En la home de un periódico usaríamos un section para las noticias principales, otro para las secundarias y otro para las relacionadas, por ejemplo.

<section>
contenido de la sección
</section>

article

Dentro de una sección de contenido usaríamos article cuando dicho contenido esté compuesto por partes independientes. Por ejemplo cada noticia dentro de un listado sería un article, o cada producto en una tienda online.

<article>
primera entrada
</article>

<article>
segunda entrada
</article>
...

aside

Esta etiqueta es un poco especial, ya que se usa para partes de la web cuyo contenido no es relevante con la finalidad del site, como por ejemplo un listado de banners.

<aside>
contenido
</aside>

footer

Para el pie podemos usar esta etiqueta, que al igual que la de cabecera, generalmente la usaremos para la página entera. Aunque tampoco hay nada que impida que la usemos como pie de artículos.

<footer>
contenido del pie
</footer>