¿Cuál es el lugar del <h1>?

Intentaré resumir en este artículo el debate acerca del elemento <h1> que se generó en la lista de correo de Frontend Spain. ¿Dónde colocarlo?, ¿cuántos debe haber en una página? y ¿cuál debería ser su relación con el resto de los headings?

La pregunta de la que surgió el debate era sencilla: ¿cuál debería ser el lugar del <h1>?, ¿en el logo de la cabecera o en el titulo del artículo principal de la página?. Veamos las conclusiones que se alcanzaron.

¿Cuál es el elemento más importante de la página?

Esta es la pregunta que debemos respondernos a la hora de decidir que elemento irá marcado como <h1>. La W3C describe el elemento heading de la siguiente manera:

Un elemento heading describe brevemente el tema de la sección que encabeza (A heading element briefly describes the topic of the section it introduces).

En el caso del <h1>, al tratarse de el encabezado de mayor nivel, se entiende que la sección que encabeza es el contenido principal de la pagina.

A partir de aquí, podemos inferir que si se trata de la página principal, su objetivo es el de introducir el sitio, por lo que el <h1> se podría asignar a la sección de branding, mientras que si nos encontramos en una página de artículo dentro de un blog o en una ficha de producto en un sitio de ecommerce, el <h1> irá a marcar el título del articulo o el nombre del producto. En este excelente post del blog CSS Wizardry el autor nos da más información sobre como marcar el logo.

¿Cuántos <h1> puede haber en la misma página?

¿Y que pasa si en una página tengo varias secciones de igual relevancia cada una con su titular? En torno a este tema existe cierta confusión, pudiéndose leer en la web que es incorrecto que exista más de un <h1> en la misma página o que de haberlos, se está perjudicando al SEO.

La especificación oficial en ningun momento dictamina cuántos <h1> puede haber dentro de una página. La confusión se debe a que las pautas de accesibilidad WCAG 1.0 efectívamente limitaron este número y obligaban a ponerlo al principio de la página, pero con las WCAG 2.0 se rectificó.

En cuanto al tema SEO, es cierto que algunas extensiones como SEO Doctor, despliegan  una advertencia cuando encuentran más de un <h1> pero no llegan a considerarlo un error. Por otra parte Google mismo, a través de su canal de Youtube para webmasters responde que la cantidad de elementos <h1> en una misma página no afecta el Page Rank, siempre y cuando se utilicen de manera lógica de acuerdo a las necesidades de la página y no en un intento de engañar a los motores de búsqueda (lo que efectivamente puede derivar en una penalización).

¿Cómo deben relacionarse los <h1> con el resto de los Headings?

Lo importante, a la hora de repartir los headings dentro de una página, es no perder de vista su condición jerárquica. Al igual que pasa al poner más de un <h1>, algunas herramientas SEO arrojan advertencias si se coloca un elemento heading sin haber colocado antes otro heading de nivel superior, por ejemplo si ponemos en una web un <h2> sin tener por encima un <h1>.

Una vez más no hay nada en la especificación que diga que esto tiene que ser así y Google tampoco es particularmente estricto con este tema, por lo que entendemos que dependiendo el caso es perfectamente válido colocar un <h2> sin necesidad de tener previamente un <h1>, siempre y cuando se mantenga una cierta lógica de jerarquías.

Conclusiones

Está claro que la disposición de los headings no es algo que pueda tomarse a la ligera y requiere de una cierta planificación. Lo principal a tener en cuenta es ¿cuál es el elemento más importante de la página, su razón de ser? Una vez encontrado este elemento le asignamos el <h1> al titular que lo describa y de ahí hacia abajo vamos añadiendo el resto de los titulares siguiendo una estructura jerárquica. Si consideramos que hay más de una sección en la misma página podemos repetir esta estructura las veces que haga falta.

HTML5

Para finalizar hay que apuntar que en HTML5, con la introducción de nuevos elementos estructurales como <section> o <article> podremos tener ordenada de manera más clara nuestra jerarquía de titulares dentro de cada sección. Además contaremos con el elemento <hgroup> para agrupar varios headings a modo de título y subtitulo. Más información en HTML5Doctor:

¿Cómo asignáis vosotros los titulares? Escuchamos vuestras opiniones.

Acerca de Nahuel Sotelo

Maquetador HTML/CSS | webmaster de Glenat España
Esta entrada fue publicada en Maquetación. Guarda el enlace permanente.

2 respuestas a ¿Cuál es el lugar del <h1>?

  1. Lander dijo:

    Interesante debate. Personalmente llevo muchos años usando un solo H1 en el header. Para el resto, creo que existen H2 y H3 de sobra.

    Respecto a la cantidad de headings y su importancia, creo que lo que lo define es la arquitectura de la información y las gerarquías que creamos a nivel de 1) código y 2)visualización de la información. Luego, con la AI y estos dos puntos, generalemnte queda resuelto. Se le podrán sacar muchos “peros”, aunque a mi me ha dado muy buen resultado tanto a nivel de AI, como en SEO o Accesibilidad.

    Salud!

  2. Hola,

    solo comentar que el W3C dice: “There are six levels of headings in HTML with H1 as the most important…” the most important significa el más importante y aunque esto se refiere a niveles de encabezado, y no a las etiquetas en si, creo que no puede haber en una jerarquia más de un elemento que sea “el más” importante, así que en mi opinión si que está dicho que no puede haber más que un h1, pero bueno, creo que lo mejor es usar HTML5 y dejarse de historias.

    Saludos

    Rafa

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>