Código HTML

El nuevo estándar HTML5 ofrece multitud de nuevas posibilidades para el desarrollo de webs (y aplicaciones): nuevas etiquetas, soporte nativo para video/audio, animaciones, etc.

Cuando se habla de estas nuevas características, lo habitual es hablar de geolocalización, almacenamiento local, canvas… (Curiosamente, la mayoría de estas características no son propiamente HTML si no más bien JavaScript, pero esto es otro tema :P)

Sin embargo, una de las novedades que a mí me parecen más interesantes es otra: la posibilidad de usar una jerarquía de etiquetas de encabezado (H1, H2, H3…) en cada sección (y, por tanto, repetir H1).

Explicación

Hasta ahora, o hasta la aparición de HTML5, las etiquetas de encabezado debían seguir unas normas muy claras: la primera en aparecer debía ser la etiqueta H1 y, muy importante, sólo debía aparecer una vez. La siguiente etiqueta de encabezado en aparecer, en caso de usarse alguna, sería la H2, luego la H3 y así hasta la H6. Con estas etiquetas se crearía el outline del documento. El mejor paralelismo sería el índice de un libro: H1 sería el título del documento, H2 un capítulo, H3 una sección, etc.

<h1>Título Principal</h1>
<p>Un texto..........</p>
   <h2>Título de subsección</h2>
   <p>Texto dentro de la subsección</p>
   <h2>Otra subsección</h2>
   <p>Texto dentro de la otra subsección</p>
       <h3>Sub-subsección</h3>

El outline de este ejemplo sería este:

  1. Título Principal
    1. Título de subsección
    2. Otra subsección
      1. Sub-subsección.

Así, para que un texto estuviera correctamente estructurado, debía contener una (y no más) etiquetas H1; seguida de varias etiquetas, opcionales, en orden (no puede aparecer una etiqueta H4 antes de una H2, por ejemplo).

Sin embargo, HTML5 cambia estas normas, debido a la aparición de las etiquetas de sección: section, article, aside y nav. Estas etiquetas dividen el contenido y crean una nueva sección. En otras palabras: lo que antes hacían los encabezados implícitamente, ahora se hace con estas etiquetas explícitamente.

Además, y esta es la diferencia más importante, estas etiquetas tienen su propia jerarquía de encabezados: dentro de esa etiqueta se puede usar una etiqueta H1 aunque antes (fuera de esta sección) se haya usado otra. Se entiende mejor con un ejemplo:

<h1>Título</h1>
<p>Párrafo</p>
<article>
   <h1>Título del artículo</h1>
   <p>Texto del artículo</p>
     <h2>Subsección del artículo</h2>
</article>

El outline de este otro ejemplo sería este:

  1. Título
    1. Título del artículo
      1. Subsección del artículo

Como se puede ver, el segundo H1 (dentro de article) aparece como subsección del H1 principal, pese a ser la misma etiqueta. El grado de importancia se establece en función de si es hija de una etiqueta de sección o no.

Esta nueva opción presenta muchas ventajas, pero también muchos inconvenientes.

Ventajas

Los motivos de esta variación (y de la propia inclusión de las etiquetas article, section, etc) son el hacer más fácil el manejo de, por ejemplo, artículos/noticias en blogs o periódicos online.

Con HTML4, gestionar la jerarquía de encabezados en un blog era bastante tedioso. Pensemos en un periódico online: en su página de portada incluirá unos fragmentos de las noticias más destacadas, que luego se pueden ver individualmente. Puede que, por lógica y posicionamiento, la estructura de la portada sea esta:

<h1>Título del periódico</h1>
    <h2>Titulares de portada</h2>
        <h3>Título de artículo</h3>
        <p>Texto de artículo</p> 
        <h3>Título de artículo2</h3>
        <p>Texto de artículo2</p>
            <h4>Subsección del artículo<h4>

Sin embargo, en la vista individual del artículo, puede que lo más lógico sea esto:

<h1>Título del artículo</h1>
     <p>Texto de artículo</p>
     <h2>Subsección del artículo</h2>

Lo que en la portada sería un H3, en el artículo individual tiene que ser un H1; lo que en portada es un H4, en el artículo es un H2. Con una estructura más compleja con secciones, anuncios, comentarios, etc. ya os podéis imaginar el lío que conlleva evitar que haya un H4 sin que haya un H3, o un fallo similar. Al final, en muchos casos simplemente se obvia ese error (ya que la web se va a ver sin problemas).

Con HTML5, un artículo siempre va a mantener la misma estructura, lo pongas donde lo pongas. Al usar la etiqueta article crea su propia jerarquía de encabezados y los que haya alrededor (en caso de haberlos) no le afectan.

Inconvenientes

Los inconvenientes que genera esta nueva forma de estructurar el contenido vienen motivados, en su mayor parte, por la falta de soporte de HTML5.

Accesibilidad

Este es el mayor problema. Según he leído en algunos artículos (aunque del año pasado, como este), los screenreaders* no saben descifrar la nueva estructura y, para ellos, todo lo que hay son H1. Así, la página es mucho más caótica para los usuarios de este tipo de dispositivos.

Paradójicamente, otra de las motivaciones de HTML5 era hacer la web más accesible :S Espero que esto se solucione pronto.

*¿Lectores de pantalla? ¡Odio no saber cómo traducir algunos términos!

SEO

Este punto, debido al secretismo de Google con sus algoritmos, no está nada claro. He leído (y participado) en varios debates sobre este tema y sigo sin saber la situación real. No hay más que hacer una búsqueda (en Google precisamente :P) sobre este asunto para ver la diferencia de opiniones entre los resultados que aparecen.

El problema sería parecido: Google no distinguiría entre todos los H1 de la página y, por tanto, no daría más importancia a unos sobre otros. Por tanto, sería imposible dar más valor a un cierto término (palabra clave) de la página.

Google dice que “no penaliza” tener varias etiquetas H1… pero una cosa es no penalizar y otra es entender correctamente la estructura del sitio (y la mayor importancia de unos H1 sobre otros, por tanto). Si algún experto en SEO lee este post y se anima a aportar su opinión sobre este tema, le estaría eternamente agradecido.

CSS

Partiendo de la base de que las etiquetas no se deben usar en función de su aspecto visual, hasta ahora aplicar estilos a los encabezados era sencillo:

h1 {
color: #FABADA;
}
h2 {
color: #BABADA;
}
h3 {
color: #AFEADA;
}

¿Pero cómo hacemos ahora si hay decenas de H1? Deberemos usar clases o especificar un estilo para “el h1 que esté dentro de un artículo”, “el h1 que esté dentro de una sección”, etc. Evidentemente, esto es más engorroso.

Conclusión:

La idea original del W3C es buena y hace más fácil estructurar un documento. Sin embargo, está poco claro cómo usar las etiquetas a día de hoy, ya que hay ciertos inconvenientes. El W3C recomienda no mezclar la forma tradicional con la nueva, pero hay quien dice que es lo mejor. ¿Opiniones?

Más información:

HTML5 And The Document Outlining Algorithm

On using h1 for all heading levels in HTML5

HTML5 Doctor: Document Outlines

HTML5 Outliner

8 thoughts on “Encabezados en HTML5

  1. Es un tema un poco engorroso, como bien dices, no hay una sola opinión acerca de como lo ve Google.

    Yo he optado en mi nuevo rediseño, a pesar de usar HTML5, a usar estructuras de encabezados tal como se usaban en HTML4. No creo que haga daño usar un H2 en un article en vez de un H1. Que se pueda no quiere decir que se deba, no?

    Así que de momento tengo un solo H1 por página… cuando la suba (hoy o mañana), os cuento!

    1. Hola Wakkos,

      Pues sí, mucha gente usa esa opción y, probablemente, sea la mejor a día de hoy. Sin embargo, me parece una pena que no se puedan aprovechar unas ventajas tan cómodas por culpa de la falta de soporte.

      Saludos y gracias por tu comentario.

      PD: Muy chulo tu diseño 🙂

  2. hola desde hace tiempo vengo poniendo varios h1 en mi web, claro dentro de los articulos y secciones en mi caso tal como explicas en el articulo y en muchas web que tambien comparten la misma informacion de que en html5 ahora si se pueden usar varios h1….
    ¿Pero porque al pasar el validador w3c en html5 lo toma como una advertenciar?

    lo curioso de esto es que si poneis esto codigo en el validador si da el error:

    titulares

    titulo1
    bla bla bla…
    titulo articulo

    si le poneis este otro sin el article no da el error:

    titulares

    titulo1
    bla bla bla…
    titulo articulo

  3. veo que los codigos html no han salido publicados, bueno son solo dos ejemplos sencillos:
    el primero es simplemente un titular h1 como titulo principal, con otro h1 seguido. Este no da la advertencia.

    Y despues tenemos otro codigo igual pero al segundo h1 lo contiene un article por ejemplo, y este si genera una advertencia en el validador que es este:

    Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

    1. Como indico en el artículo, uno de los problemas de esta idea es la accesibilidad: los lectores de pantalla no han implementado este “outline” y, por tanto, para ellos todos son H1 con el mismo nivel. De eso es de lo que te advierte el validador. Es una pena que no se haya mejorado, a mí me parecía buena idea aunque sé que a mucha otra gente no.

Deja un comentario

Facebook