hgroup element: Un agrupador de encabezados (h1-h6)

En este post vamos a tratar uno de los nuevos elementos de html5, el hgroup. Para empezar, siempre viene bien irse a la definición del estándar:

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.

W3C Specification

Vale, pasemos a describir para que sirve este elemento. Como su definición indica, sirve para agrupar un conjunto de uno o más elementos de encabezado (h1-h6). Es decir, este nuevo elemento nos va a permitir agrupar en un mismo bloque un título y un subtitulo, o eslogan. Dentro de un elemento hgroup tan solo podemos introducir etiquetas de encabezado tales como h1, h2 o h3, de forma que no permite ningún otro tipo de tag en su interior.

Pero ..., porque es interesante este elemento: La respuesta está en la semantica que esta agrupación nos da. Es cierto que hasta ahora, nosotros podríamos usar sin problemas las etiquetas h1-h6, por ejemplo, a la hora de hacer una página en el que se muestra una noticia o articulo (diarios o blog por ejemplo) podríamos tener los siguientes encabezados:

• El título de nuestro sitio web
• El slogan utilizado en la cabecera que describe nuestro sitio web
• El título de la noticia
• El subtitulo de la noticia
• El título de una sección con información adicional en la columna de la derecha.

En este momento, en versiones anteriores teníamos un problema, no eramos capaces de poder agrupar los encabezados, pero podríamos empezar a asignar encabezados de la siguiente forma:

• H1: El título de nuestro sitio web
• H2: El slogan utilizado en la cabecera que describe nuestro sitio web
• H3: El título de la noticia
• H4: El subtitulo de la noticia
• H5: El título de una sección con información adicional en la columna de la derecha.

 Realmente esta asignación de prioridades de encabezado no es del todo correcta, principalmente porque se establece una prioridad de elementos que no es cierta ya que, según este orden, el slogan de la página es más importante que el titular de la noticia mostrada, por lo tanto, una estructura más correcta podría ser:

• H1: El título de nuestro sitio web
• <div>: El slogan utilizado en la cabecera que describe nuestro sitio web
• H2: El título de la noticia
• H3: El subtitulo de la noticia
• H3: El título de una sección con información adicional en la columna de la derecha.

Que pasa en este momento, lo primero es que hemos cambiado el slogan, ya no es un elemento de encabezado, y el titular de la noticia ha pasado a ser el h2 de esta forma elevamos la importancia del titular de la noticia. En nuestro caso hemos cambiado también el titular de nuestra sección de la derecha pasando a ser h3 y estando al mismo nivel que el subtitulo. Otra alternativa sería directamente quitar el título de la sección de la derecha de los encabezados, pasando a ser un elemento más de la web. 

Podemos seguír buscando posibles estructuras de nuestros encabezados, pero habrá una cosa que nunca llegaremos a conseguir, el relacionar los encabezados entre ellos, es decir, un sistema externo como un rastreador no será capaz de establecer asociaciones entre estos elementos, por lo que nunca sabrá que el slogan va asociado el título de nuestro sitio web, o que el subtitulo de la noticia va ligado con el titular.
Para estos casos usaremos hgroups, pudiendo agrupar bloques nuestros encabezados:

<header>

   <hgroup><h1>Título sitio web</h1><h2>Slogan</h2></hgroup>

</header>

<header>

   <hgroup><h1>Titular de la noticia</h1><h2>Subtitulo de la noticia</h2></hgroup>

</header>

<header>

   <hgroup><h1>Titular sección secundaria</h1></hgroup>

</header>

En este caso si estamos ofreciendo información adicional, no solo que elemento es el titular principal y cual secundario, sino que además estamos diciendo que están estrechamente relacionados.
En el ejemplo he usado el elemento header del cual no he comentado nada, pero esto lo dejaremos para otro post en el que explique mejor como usar dicho elemento.