Cómo utilizar subtítulos, títulos alternativos y eslóganes con HTML5

Explicamos la manera correcta de establecer este tipo de elementos con el nuevo estándar establecido por HTML5.

A partir de la versión 5.1 del lenguaje HTML, el elemento hgroup ha sido declarado como obsoleto. Esta etiqueta era comúnmente utilizada para agrupar un conjunto de uno o varios títulos, los cuales eran enmarcados mediante las etiquetas h1-h6. Por ejemplo, si se tenía un título de sección y éste era acompañado por un subtítulo, ambos elementos debían ser englobados por la etiqueta hgroup, para que de esa manera se pudiera establecer la relación entre ambos.

La función de este elemento resultaba bastante sencilla de comprender, sin embargo pocas veces era realmente aplicada en el código HTML de las páginas web. Generalmente, cuando se quería definir un subtítulo o un eslogan, simplemente se optaba por establecer que ese título era subalterno de otro dentro del mismo elemento, ya sea mediante clases o utilizando otro tipo de etiquetas.

Lo cierto es que la etiqueta hgroup no tenía ningún objetivo de presentación, su único propósito era ocultar los subtítulos para que no aparecieran cuando los navegadores, sitios de terceros o los marcadores hicieran uso del algoritmo de esquema o delineado para representar la estructura de un contenido.

Como ya es conocido, muchos elementos que no tienen un propósito bien establecido o que no va más allá de una función muy específica, tienden a ser evaluados con lupa, y si a esto le aunamos que no existe un beneficio visual al contar con ellos, es muy probable que dicho tipo de elementos este destinado al fracaso y sea removido del estándar. Esto es lo que ha pasado con hgroup, y es por ello que ahora con HTML5 debemos de buscar otras formas para definir un subtítulo, y es entonces que viene la pregunta ¿Cómo hacerlo? Y la respuesta es bastante sencilla, simplemente sigue utilizando la forma como se ha venido haciendo desde antes.

Recomendaciones para el marcado de subtítulos y similares

Se han añadido una serie de consejos y recomendaciones a la especificación de HTML5, los cuales nos indican cuál es la forma correcta de marcar subtítulos, títulos alternativos y eslóganes.

Lo primero que debemos considerar, es que los elementos h1–h6 no deben ser utilizados para establecer encabezados subalternos o subtítulos, al menos que estemos intentando indicar una nueva sección o subsección con dicho elemento. En cambio, se han propuesto tres métodos sencillos para enmarcar subtítulos, los cuales explicaremos a continuación.

El más sencillo de los métodos es utilizar la puntuación adecuada. Utilizar un signo de dos puntos dentro del mismo encabezado denotará que lo que este después de dicho signo es complementario a lo que está antes. En el siguiente ejemplo, el subtítulo de una película está en la misma línea que el título y ambos están separados por dos puntos.

<h1>X-Men: Days of Future Past</h1>

El segundo método, propone el uso de un elemento span dentro de un elemento de título, lo que permite dar un estilo diferente a la parte secundaria. Por ejemplo, si quisiéramos que el subtítulo se mostrará con una letra cursiva podríamos establecer la siguiente sentencia de estilo “h1 span {display:block; font-style:italic;}”.

<h1>X-Men 
   <span>Days of Future Past</span> 
</h1>

La tercera opción, y quizás la más adecuada, es utilizar un elemento de tipo párrafo, englobando tanto al título como a dicho párrafo con la etiqueta header.

<header>
<h1>X-Men</h1>
<p>Days of Future Past</p>
</header>

Al utilizar un elemento de tipo párrafo para desplegar el subtítulo, no es necesario darle un estilo de “display:block” al elemento para remarcar la diferencia con el encabezado principal. Con este método el eslogan no luce como un encabezado en sí, pero se puede manejar como tal al estar englobado por la etiqueta header.

Si se requiere que los subtítulos no sean incluidos en la tabla de contenido y estos no están destinados a representar el comienzo de una nueva sección, este método es el adecuado.

¿Qué pasará con hgroup?

Debido a que ha sido marcado como obsoleto en HTML5, lo recomendado es evitar utilizar este elemento en tus futuros proyectos. Si por alguna razón decides seguir incluyendo ésta etiqueta, al momento de analizar tus páginas mediante el validador de W3C recibirás un mensaje de error.

Al igual que para otros elementos obsoletos, los navegadores continuarán con su actual nivel de soporte para la etiqueta hgroup. Es decir, los navegadores que actualmente identifican dicho elemento lo continuarán haciendo, por lo tanto, si tienes varias páginas donde has hecho uso de esta etiqueta, no existe prisa por deshacerse de su uso, simplemente sobrevivirá como un elemento sin relevancia semántica, un div con un nombre distinto.