HTML5: ¿Adiós al dilema del encabezado?

Era muy común entre los programadores web la discusión sobre la utilización del encabezado, pero HTML5 parece que va a acabar con ellas. El H1 siempre era el principal quebradero de cabeza, puesto que es clave en el posicionamiento del sitio y  muchos expertos no tenían claro si su utilización en varias partes del documento, aunque estuviera en diferentes secciones o elementos, podía ser penalizada por los buscadores restándole prioridad.  Para resolver este problema han aparecido las nuevas etiquetas de HTML5 que en Netconsulting ya estamos utilizando.

Con el HTML anterior al no poder repetir los encabezados teníamos que asignar una estructura de encabezados como, por ejemplo, esta:

• H1: Título de la página
• H2: Subtítulo de la página
• H3. Título de los artículos
• H4: Título de las secciones

Esta estructura se hacía muy rígida, y no se ajustaba realmente a la importancia del contenido.

Pero con el etiquetado de HTML5 mediante tags como <header>,  <article>, <section> o <nav> se consigue dar a cada parte del documento una jerarquía concreta, de modo que el h1 que sitúes en cada una de ellas la absorberá, y los encabezados quedarán jerarquizados independientemente sin afectar al SEO. Cuando se programa así el buscador lee que cada h1 va en un sitio concreto y no los mezcla, de modo que así consigue leer mejor el contenido.

Además ha aparecido <hgroup>, un tag con el que  por fin se pueden agrupar dentro de un mismo grupo varios encabezamientos de h1- h6 sin afectar tampoco al posicionamiento. De esta manera todas las cabeceras  que pongamos con sus respetivos títulos, subtítulos o antetítulos quedan asociadas entre sí y delimitadas en la sección correspondiente con su propios elementos de valor jerárquico,  y de además se agrupan sin interponerse a las demás partes que también tengan un grupo de encabezados en <hgroups> tal y como hemos explicado. Ahora, cada parte de la web tendrá su propio H1 y no habrá que recurrir a la jerarquización antigua que hemos puesto más arriba.

Aquí os mostramos un ejemplo de cómo funcionaría:

<header>
<h1>El título más importante de la página</h1>
</header>

<article>

<hgroup>
<h1>El título del artículo</h1>
<h2>Subtítulo del artículo</h2>
</hgroup>

<p>el cuerpo de texto</p>

</article>

De esta manera el h1 del <header> quedaría como principal sin que afecte para nada el que hay en <article>, y podríamos poner muchos más artículos o secciones sin que se viera de ningún modo afectado lo que quisiéramos posicionar en el encabezado principal.