La verdad sobre las etiquetas h1 múltiples en la era de HTML5

Ya seas un desarrollador o un diseñador web, es muy probable que te hayan preguntado o hayas tenido que  responder a una pregunta con mucha frecuencia a lo largo de los años. ¿Cuántas etiquetas <h1>puedo usar en cada página, y cómo debería implementarlas?

Generalmente hay dos motivos para hacerse esta pregunta. El primero y el más común tiene que ver con el SEO; asegurarse de que el contenido está formateado de la mejor forma posible para facilitar la indexación de los motores de búsqueda. La segunda es la corrección técnica; asegurarse de que el código que define la estructura de una página está escrito conforme a los estándares de las especificaciones de W3C.

Con la llegada de HTML5 la respuesta a esta pregunta ha cambiado de forma significativa tanto en lo concerniente al SEO como a los aspectos técnicos. Ahora no solo es posible disponer varias etiquetas de nivel <h1> dentro de una misma página haciendo que tenga sentido para los motores de búsqueda, sino que actualmente está recomendado en la mayoría de los casos.

Sin embargo, como la especificación HTML5 todavía no goza de una amplia comprensión, todavía existen muchos consejos flotando por ahí, algunos incluso escritos bastante recientemente, que se basan en las reglas del diseño web anterior a HTML5.

En este tutorial vamos a aclarar algunas confusiones. Veremos en profundidad qué implica HTML5 en el uso de las etiquetas <h1>, asimismo veremos cómo puedes aprovechar las mejoras disponibles para crear páginas web más ricas semánticamente y mejor estructuradas que nunca.

La antigua regla “sólo una etiqueta h1″

Durante mucho tiempo se consideró como regla cardinal de HTML y de SEO que cada página individual solo debería tener un titular de nivel <h1>, y solo uno. Además, la regla prescribió que este único titular <h1> debería hacer referencia al tema principal de la página.

Generalmente esta regla se seguía con el objetivo de ayudar a que los motores de búsqueda entendiesen el tema principal de cada página, de forma que pudiesen determinar su relevancia para varias frases de búsqueda, mejorar la precisión de los resultados ofrecidos por los buscadores y en consecuencia mejorar el posicionamiento de las páginas de calidad, creadas y estructuradas adecuadamente.

Tomemos como ejemplo una página web de empresa anterior a la aparición de HTML5. En este ejemplo el nombre de este sitio web empresarial se muestra en la sección del encabezado de todas las páginas, la página de inicio presenta una descripción de la empresa, y en otra área de la web hay publicados artículos especializados.

Siguiendo la regla de la «etiqueta <h1> única», la página de inicio del sitio web aplica etiquetas <h1> en ell nombre de la empresa que aparece en la sección del encabezado o “header”, indicando que el tema principal de esa página es la propia empresa.

Sin embargo, en un artículo publicado en otro lugar de este mismo sitio web, las etiquetas <h1> son eliminadas del nombre de la empresa en el header y en su lugar se usa el título del artículo correspondiente. Eso se hace porque el título del artículo proporciona una etiqueta más representativa del tema principal de la página en cuestión, que ahora es el contenido del artículo en contraposición a la descripción de la empresa que aparecía en la página de inicio.

Por tanto, la versión pre-HTML5 de este sitio web estaría marcada de una forma parecida a esto:

¿Por qué son importantes los titulares?: porque describen el documento

A pesar de que durante un largo tiempo la atención se ha centrado en las etiquetas <h1>, nunca han sido un elemento que funcionase de forma aislada e independiente del resto del documento. Existe una razón tras la importancia de la cuidadosa ubicación de la etiqueta, tanto en la era HTML5 como en la pre-HTML5, se trata de la generación de un esbozo de los temas principales que se tocan en el documento.

Document outlines are something akin to a table of contents for a website. They are automatically generated from the markup on any given webpage.

Antes de la parición de HTML5, los titulares de un documento se generaban a partir del uso de las etiquetas <h1> hasta la <h6>. Cada uso de un titular implica el inicio de una nueva sección de contenido.

Toma como ejemplo el siguiente html, observa la ubicación de las etiquetas <h1>, <h2>, y <h3>, que determinarán la estructura del documento:

El código de arriba, antes de la aparición de HTML5, habría generado la siguiente estructura de documento:

• 1. (documento) El uso adecuado de los cacahuetes
  • 1. (h2) Cómo comer cacahuetes
    • 1. (h3) Métodos expertos de comer cacahuetes
  • 2. (h2) Uso incorrecto de los cacahuetes

El primer elemento <h1> es considerado como la etiqueta de todo el documento. Los siguientes titulares son considerados como etiquetas para las secciones del contenido del documento, creando una estructura jerárquica en forma de árbol en el mismo.

El ejemplo anterior es bastante sencillo, pero las páginas web reales rara vez lo son. Cuando necesitamos presentar contenido más complejo con código anterior a HTML5 nos encontramos con grandes dificultades, y la razón es que anteriormente solo podíamos usar un titular de nivel <h1> por página.

En el ejemplo anterior solo se expone un único tema: “El empleo adecuado de los cacahuetes”. Pero, ¿qué sucedería si la exposición del tema se presentase en una página compuesta por otros artículos de igual importancia como suele ocurrir en las páginas de archivo de un blog?

Observa este html que contiene un segundo artículo, (cada artículo está envuelto entre dos etiquetas <div>):

Antes de la aparición de HTML5, este código habría generado la siguiente estructura de titulares:

• 1. (documento) El uso adecuado de los cacahuetes
  • 1. (h2) Cómo comer cacahuetes
    • 1. (h3) Métodos Expertos de comer cacahuetes
  • 2. (h2) Uso incorrecto de los cacahuetes
• 2. (h1) Hervir judías
  • 1. (h2) ¿Merece verdaderamente la pena hervir las judías?

Ahora, aunque existen en la página dos artículos con igual importancia, el primer titular, «The proper use of peanuts» todavía se interpreta como la etiqueta que representa a todo el documento simplemente porque es la que aparece en primera posición. Esto significaría por tanto que la temática de todo el documento es «The proper use of peanuts», aunque el segundo artículo versa sobre un asunto totalmente distinto.

El método habitual de evitar esto consistía en crear un titular que englobase al resto dentro de las etiquetas <h1> de primer nivel  siempre que existiesen secciones de contenido con igual importancia, intentando con ello representarlas a todas en la medida de lo posible. Como ocurre en el siguiente ejemplo

Observa la adición del titular genérico con etiqueta <h1>, y la estructura formada a través de cada uno de los siguientes titulares de nivel inferior.

Ahora la estructura del documento generada a partir de sus titulares sería la siguiente:

• 1. (documento) Blog Literario Sobre las Leguminosas
  • 1. (h2) El uso adecuado de los cacahuetes
    • 1. (h3) Cómo comer cacahuetes
      • 1. (h4) Métodos Expertos de comer cacahuetes
    • 2. (h3) Uso incorrecto de los cacahuetes
  • 2. (h2) Hervir judías
    • 1. (h3) ¿Merece verdaderamente la pena hervir las judías?

Problemas ocasionados por la estructura de documento previa a HTML5

Aunque esta estructura de titulares de documento era lo mejor que se podía hacer antes de la aparición de HTML5, presentaba algunos problemas importantes:

• La etiqueta general para el conjunto de la página debilita su relevancia.
  Tenemos el titular «Legume Literature Blog» entre etiquetas <h1> y haciendo la función de titular general para toda la página, pero su texto representa de forma muy vaga el contenido. Esto disminuye la capacidad de los motores de búsqueda para interpretar la temática real de la página y la relevancia como respuesta a las adecuadas frases de búsqueda.
• Los artículos independientes son vistos como subsecciones de una única pieza e contenido.
  No hay forma de distinguir los dos artículos en la misma página como algo independiente, de igual importancia y entidades por sí mismas. Ambas son concebidas como partes de una única pieza de contenido global, aunque no lo sean.
• Se necesita diferente código de estructura para distintas áreas del sitio web.
  Para que un visitante vea cada uno de los artículos como algo independiente, como se puede hacer en un blog típico, el código de la estructura debería rehacerse de forma que las etiquetas <h1> sean aplicadas los titulares del artículo en lugar de al título de del sitio web, tal y como he mostrado en el apartado anterior a través del ejemplo de la web de mi propia empresa.
• Existen multitud de restricciones en lo que respecta a la naturaleza de la etiqueta de un documento o título del sitio web.
  Aquí es donde HTML5 nos asiste magníficamente para resolver cada uno de estos problemas. En muchas situaciones el título de un sitio web, que tiende a jugar el papel de etiqueta para el documento incluso en HTML5, no está relacionado con su contenido en cuanto al significado. Por ejemplo, podría crear un blog con cuyo título de sitio fuese “Kezz Says” y podría publicar en él un artículo sobre código HTML y otro sobre cachorritos monos. En este caso no tendría sentido que el título del sitio se interpretase como representativo de ninguno de estos artículos, así que tendría que cambiar el nombre de mi blog. Esto podría suponer un problema, especialmente si el sitio web desea promocionarse por medio de un nombre de marca memorable, aunque no tenga necesariamente ningún significado.

Aquí es donde resulta útil HTML5 al resolver cada uno de estos problemas.

El algoritmo HTML5 de la estructura del documento

Si reflexionas sobre cada uno de los problemas que acabamos de describir, todos ellos tienen un origen común y bastante simple: Asumen que cada página web es un documento independiente con una temática única que solo necesita una etiqueta.

Una solución igualmente sencilla a estos problemas estaría en la posibilidad de indicar cuando una página web cuenta con secciones independientes, que en potencia puedan versar sobre distintos temas y cada una con una etiqueta significativa propia.

Si fuese posible especificar que los artículos contenidos en una página son independientes entre sí, se podrían etiquetar con titulares significativos que representasen apropiadamente sus respectivos contenidos, y dar a cada uno la misma importancia.

Si fuese posible aclarar cuando el título de un sitio no representa el contenido de la página, el problema de la pérdida de relevancia estaría resuelto.

Con la introducción de una clara indicación sobre las diferencias entre el título del sitio, los artículos y los títulos de los artículos, ya no sería necesario cambiar la estructura el código de un área a otra. Un titulo para el sitio web con la etiqueta <h1> podría mantener el resto de etiquetas <h1> en el resto del sitio.

Y como se dejaría claro cuando el título del sitio no representa el contenido del artículo en la página, podríamos establecer que fuese cualquier cosa que deseásemos, incluso algo muy abstracto.

HTML5 posibilita todas estas cosas mediante la introducción de sus elementos semánticos y el algoritmo HTML5 que define la estructura del documento.

Aspectos clave del algoritmo HTML5 para la estructura del documento

Mientras la estructura de documento previa a HTML5 estaba formada casi exclusivamente por etiquetas de titulares, el algoritmo de la estructura HTML5 usa los siguientes aspectos clave:

• Sección raíz: Una sección raíz es un contenedor que proporciona un espacio para otras distintas secciones de contenido que serán definidas en él. Cada una de estas secciones obtendrá su propia estructura de contenido. El elemento de sección de nivel superior en cualquier página está formado por sus etiquetas <body>, de manera que siempre habrá una estructura generada para cada página de la web, empezando por las etiquetas <body> y continuando con las secciones en las que se divide.
  • Etiquetas raíz para las secciones: <body>, <blockquote>, <figure>, <td>, <details>, <dialog>, <fieldset>

• Secciones del contenido: Cada sección raíz está dividida en una serie de secciones de contenido. Estas secciones se crean colocando etiquetas para elementos de secciones de contenido alrededor de distintas piezas del mismo. Los elementos para las secciones de contenido son semánticas y se pueden anidar. Dependiendo del tipo de contenido que vayas a presentar deberás usar unas u otras. (veremos cómo usar cada elemento para las secciones de contenido más adelante).
  • Etiquetas para las secciones de contenido: <section>, <article>, <nav>, <aside>

• Contenido de titulares: Etiquetas de texto para las secciones de contenido. En ausencia de etiquetas de sección de contenido, la presencia de una etiqueta seguirá siendo interpretada como el inicio de una nueva sección de contenido.
  • Etiquetas para los titulares: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Entender cómo se emplean estos aspectos de HTML5 es relativamente fácil, y normalmente el proceso funciona de la siguiente manera:

1. La sección raíz del documento está formada por sus etiquetas <body>.
2. Dentro de esta sección raíz, el documento se divide en otras subsecciones de contenido, por ej. enmarcando los artículos dentro de etiquetas <article>.
3. Las etiquetas de los titulares se colocan según se necesiten dentro de estos contenido, con la primera etiqueta de encabezado de cualquier sección actuando como etiqueta (label) de dicha sección.

Existen muchos otros aspectos en lo que respecta al algoritmo de la estructura del documento con HTML5. Encontrarás amplia información sobre este tema en W3C.

En cualquier caso, los aspectos que hemos listado arriba son suficientes para resolver los problemas descritos en la primera parte de este tutorial.

seguir leyendo en Tuts+

Lecturas recomendadas

• Proporcionar la vista de esquema en w3.org. (artículo original en inglés).
• Estructura en w3.org. (artículo original en inglés).
• Secciones Raíz en w3.org. (artículo original en inglés).
• Crear secciones de contenido en w3.org. (artículo original en inglés).

Herramientas recomendadas

• Headings Map 2.0.5 para Firefox – «Las extensiones generan un mapa del contenido o índice a partir de cualquier documento web estructurado con titulares o con secciones en HTML5. Muestra la estructura de titulares, los errores de la estructura (por ej. niveles incorrectos), y sirve también para desvelar la estructura HTML5.
• HTML5 Outliner para Chrome – «Esta extensión está usando el algoritmo de estructura de HTML5 para crear una tabla de contenidos. Es posible hacer clic sobre la tabla de contenidos y la herramienta intenta, también, resaltar el titular o la sección en cuestión tras dirigirnos a él.