Mucho se está hablando del futuro de la web con HTML5 y la desaparición de Flash, que, como dice Steve Jobs, pertenece a la era del PC. Pero bueno, eso ya sería entrar en otro tema…
Poco a poco iremos introduciendo novedades y curiosidades respecto a esta revisión del HTML. Aquí os expongo la primera. Espero que la encontréis interesante.
Un aspecto controvertido y que deja alguna que otra duda es la utilización de las etiquetas <section> y <article>. Depende del sitio que consultemos podremos ver que se utilizan ambas de manera muy similar, llevando a veces a confusión. A List A Part, por ejemplo, hace una previsualización del <section> dentro del article. En otros lugares, por el contrario, -y es lo más habitual- aparece el <section> como padre de article. Esto tiene relevancia a la hora de estructurar el contenido, ya que anteriormente tan solo nos preocupábamos por saber qué id íbamos a pasarle a nuestro divisor.
Smashing Magazine nos ofrece un tutorial de cómo maquetar una página con HTML5 partiendo de cero y sigue los principios de HTML5 al considerar la etiqueta <article> de manera mucho más semántica que la etiqueta <section>. Es decir, <section> vendría a ser un divisor, al estilo de la etiqueta <div>, que no te aporta más que una división estructural.
Si nos dirigimos al sitio oficial del W3C no encontraremos información muy precisa, ya que el único dato de valor que aporta es el referente semántico de que <article> puede ser una sección importante y repetida dentro de un sitio, como pueden serlo un post en un fórum, una entrada de blog o una noticia, mientras <section> sería solamente un grupo de contenido similar que, a su vez, puede contener <header> y <footer>.
A medida que vayan proliferando las páginas escritas en HTML5 se irá clarificando qué uso terminamos por asignar -nosotros, los programadores- a cada una de estas dos etiquetas.
Se clarificó, y en parte al revés de lo que esperábamos
Este artículo es de 2010 y terminaba confiando en que la práctica resolvería la duda. Lo hizo. Esto es lo que quedó en claro, y conviene contarlo porque una parte de la promesa original acabó retirándose de la especificación.
La regla que zanja el uso de <section>
La propia especificación de HTML lo dice sin rodeos: <section> no es un contenedor genérico. Cuando un elemento hace falta solo para dar estilo o por comodidad al programar, lo correcto es <div>.
De ahí sale la regla práctica que hoy usa todo el mundo: si no le puedes poner un encabezado, no es una <section>. Un bloque que no admite un título natural es una división visual, y para eso está <div>, que no promete significado que luego no cumple.
La prueba que zanja el uso de <article>
Para <article> el criterio es la independencia: ¿tendría sentido este contenido sacado de aquí, en un lector de noticias, en otra página, citado suelto? Un post, una noticia, una ficha de producto, un comentario. Si la respuesta es sí, es un <article>. Si solo se entiende dentro de la página, no lo es.
Y responde a la duda con la que arrancaba el artículo, la de quién es padre de quién: los dos anidan en los dos sentidos, y ninguno es el envoltorio obligatorio del otro. Un <article> puede dividirse en varias <section>, y una <section> puede agrupar varios <article>. Depende de qué relación tenga el contenido, no de una jerarquía fija.
La parte que se cayó: el algoritmo de esquema
Aquí está el giro que nadie anticipaba en 2010. HTML5 prometía un algoritmo de esquema por el cual cada <section> abriría un nivel nuevo, de modo que se podía escribir <h1> en todas partes y el nivel real se calcularía solo según la profundidad.
Ese algoritmo no lo implementó nunca ningún navegador ni ninguna tecnología asistiva, y acabó retirándose de la especificación. Quien se lo creyó y llenó sus páginas de <h1> anidados construyó documentos que, para un lector de pantalla, son una lista de encabezados de primer nivel sin jerarquía.
La consecuencia práctica es que los niveles se ponen a mano: un <h1> por página y <h2> a <h6> según la profundidad real, exactamente igual que antes de HTML5.
Lo que sí ganó <section>
Una <section> con nombre accesible (un aria-label, o un encabezado referenciado con aria-labelledby) se expone a las tecnologías asistivas como una región navegable. Sin ese nombre, no aporta nada a la navegación.
Es decir: la etiqueta acabó teniendo un valor real, pero condicionado a ponerle título. Que es, otra vez, la misma regla del principio.
