El W3C ha retocado recientemente la especificación de los encabezados (H1, H2...) en HTML5. Nos piden que no usemos el nuevo sistema de outline y sigamos usando el de HTML4, debido a que ningún navegador lo ha implementado. A menos que algún milagro lo cambie, habremos perdido una grandísima oportunidad.
¿Outline? ¿Pero eso qué es?
El document outline es una de tantas características de HTML a las que no se presta mucha atención, pero que tienen mucha importancia a la hora de crear documentos HTML de calidad. Yo mismo descubrí de casualidad cómo funcionaba, ya que lo habitual es hablar de otras cosas más impactantes (animaciones, vídeo nativo, etc). Esa parece haber sido su condena, como veremos más tarde.
Piensa en el índice de un libro: en él aparecen los títulos de sus diferentes secciones, puede que también con alguna que otra subsección. Pues bien, el document outline es el índice que se crea de cada página HTML a partir de su estructura.
En HTML4, las diferentes secciones de ese índice se definían implícitamente a partir de los encabezados Hn.
Este código...
...generaría este índice:
- Título Principal
- Título de subsección
- Otra subsección
- Sub-subsección.
HTML5 introdujo una serie de etiquetas de sección: article, nav, section y aside. Estas sirven para delimitar explícitamente el principio y el fin de cada sección del documento y tienen que llevar, obligatoriamente, un título (un Hn).
El cambio radical del outline de HTML5 es que el índice se genera automáticamente a partir del nivel de nesting de cada sección, sin importar el número que le pones a cada Hn. En otras palabras, el índice del ejemplo anterior se podría generar con este otro código:
Digo se podría porque, lamentablemente, esa es solo la teoría. Como comenta Steve Faulkner en HTML5 Doctor, han pasado 7 años y ningún user agent (navegador, lector de pantalla, buscador…) se ha preocupado de implementar este algoritmo y siguen reconociendo todos los h1...como h1. Esto genera un grave problema de accesibilidad (ya que los usuarios de lectores de pantalla usan los distintos niveles de encabezados para orientarse por el documento), así como de SEO.
Esta es la razón por la que el W3C, con Faulkner a la cabeza, ha decidido cambiar la anterior sugerencia por una clara advertencia en contra del uso de este outline. Dicho de otra forma: se dan por vencidos y recomiendan no seguir su propio estándar.
Su consejo es combinar la manera tradicional con la nueva: usar etiquetas de sección para delimitar las mismas explícitamente, pero insertando encabezados con el número que corresponda (h1, h2, h3 y no siempre h1).
¿Tan difícil es poner el Hn adecuado?
Entre los comentarios del artículo de HTML5 Doctor hay cosas como esta:
“Todo esto surgió (...) porque hay gente que no sabe contar”
Computer says NO to HTML5 document outline (comment-2128507)
He leído más de un comentario de ese tipo, ridiculizando la idea del outline de HTML5 y afirmando que es super fácil mantener una correcta jerarquía de encabezados.
¡Ja! ¡Ja y mil veces ja!
Para empezar, a muchas de las personas encargadas de maquetar webs les importa bien poco la diferencia entre un div y un p, así que ya ni hablamos de mantener una correcta jerarquía de encabezados para que el esquema del documento sea lo más correcto posible.
Además de esto, ¿cuántos de los pocos que sí se preocupan de ello tienen control sobre todo el HTML de toda la web? En cualquier web mínimamente grande habrá partes que se generarán de manera más o menos automática y/o con intervención de gente más inexperta en HTML (ehem, el propio cliente): si haces includes de otros archivos/webs en tu página, tu jerarquía se va al traste; si tienes un h1 en la página vía un campo title y luego el cliente mete otro h1 en un editor WYSIWYG tu jerarquía se va al traste…
Mantener por completo la jerarquía correcta es casi misión imposible. El outline de HTML5 hacía esto muchísimo más fácil, en especial el tener sistemas de plantillas con includes, como explicaba en mi artículo sobre el diseño atómico del año pasado.
Hay soluciones para corregir el problema. En el caso del diseño atómico, podría pasarse una variable a la plantilla con el nivel adecuado. Otra opción, que sugerían en un comentario del artículo, era poner todos los encabezados como h1 y luego usar un parseador que los cambiase automáticamente. Lo lamentable es que tengamos que recurrir a chapuzas de ese tipo simplemente porque nadie haya dado soporte a este outline.
¿Y por qué no le han dado soporte?
Gran pregunta. Una de las críticas que siempre ha recibido este sistema es que hacer hojas de estilo sería muy complicado: habría que crear estilos para h1, para h1 dentro de article/section/nav/aside, para h1 dentro de article dentro de article, etc.
Si este es el motivo... qué triste. No me digáis que no sería absurdo que no se implementara el outline porque no se sabe encontrar una solución, en una época en la que el CSS es capaz de hacer casi cualquier cosa inimaginable hace unos años (degradados, animaciones, etc). Todo esto sin contar con que, de todos modos, lo recomendable sería usar clases para dar esos estilos y no depender de la etiqueta propiamente dicha.
Steve Faulkner explica que en la especificación no se incluía ninguna obligación de seguir este outline y los navegadores han estado pasando olímpicamente (y nada indica que vayan a cambiar).
Es curioso cómo en unos pocos años los navegadores han hecho posible, por ejemplo, geolocalizar a un usuario, acceder su webcam, y dibujar en tiempo real el resultado en un canvas, y, por otra parte, en 7 años no han implementado un algoritmo que no ocupa más de 40kb en sencillas utilidades de JavaScript. La misma dejadez impide usar elementos tan útiles como los input de tipo date. ¡Ay… estas cosas con Internet Explorer 6 no pasaban!
¿Podemos hacer algo?
Es una cuestión que podéis debatir en los comentarios. Este outline sigue siendo parte de la especificación, no lo han retirado (como sí retiraron, por ejemplo, la etiqueta hgroup). Si piden que no se use, es simplemente porque los navegadores no lo soportan. ¿Podemos ejercer algún tipo de presión sobre ellos para que le presten atención? ¿Creéis que es algo que merece la pena?