S'està parlant molt del futur de la web amb HTML5 i la desaparició de Flash, que, com diu Steve Jobs, pertany a l'era del PC. Però bé, això ja seria entrar en un altre tema...
Poc a poc anirem introduint novetats i curiositats respecte a aquesta revisió de l’HTML. Aquí us exposo la primera. Espero que la trobeu interessant.
Un aspecte controvertit i que deixa alguna que altra dubte és la utilització de les etiquetes <section> i <article>. Depèn del lloc que consultem podrem veure que s’utilitzen totes dues de manera molt similar, portant a vegades a confusió. A List A Part, per exemple, fa una previsualització del <section> dins de l’article. En altres llocs, en canvi, -i és el més habitual- apareix el <section> com a pare de l’article. Això té rellevància a l’hora d’estructurar el contingut, ja que anteriorment tan sols ens preocupàvem de saber quin id li passaríem al nostre divisor.
Smashing Magazine ens ofereix un tutorial de com maquetar una pàgina amb HTML5 partint de zero i segueix els principis d’HTML5 en considerar l’etiqueta <article> de manera molt més semàntica que l’etiqueta <section>. És a dir, <section> vindria a ser un divisor, a l’estil de l’etiqueta <div>, que no t’aporta més que una divisió estructural.
Si ens dirigim al lloc oficial del W3C, no trobarem informació molt precisa, ja que l’única dada de valor que aporta és el referent semàntic que <article> pot ser una secció important i repetida dins d’un lloc web, com poden ser una publicació en un fòrum, una entrada de blog o una notícia, mentre que <section> seria simplement un grup de contingut similar que, al seu torn, pot contenir <header> i <footer>.
A mesura que vagin proliferant les pàgines escrites en HTML5, es clarificarà quin ús acabem assignant -nosaltres, els programadors- a cadascuna d’aquestes dues etiquetes.
Es va clarificar, i en part al revés del que esperàvem
Aquest article és del 2010 i acabava confiant que la pràctica resoldria el dubte. Ho va fer. Això és el que va quedar clar, i convé explicar-ho perquè una part de la promesa original va acabar retirant-se de l’especificació.
La regla que tanca l’ús de <section>
La mateixa especificació d’HTML ho diu sense embuts: <section> no és un contenidor genèric. Quan un element cal només per donar estil o per comoditat en programar, el correcte és <div>.
D’aquí surt la regla pràctica que avui fa servir tothom: si no li pots posar un encapçalament, no és una <section>. Un bloc que no admet un títol natural és una divisió visual, i per a això hi ha <div>, que no promet significat que després no compleix.
La prova que tanca l’ús d’<article>
Per a <article> el criteri és la independència: tindria sentit aquest contingut tret d’aquí, en un lector de notícies, en una altra pàgina, citat sol? Un post, una notícia, una fitxa de producte, un comentari. Si la resposta és sí, és un <article>. Si només s’entén dins de la pàgina, no ho és.
I respon al dubte amb què arrencava l’article, el de qui és pare de qui: tots dos s’imbriquen en els dos sentits, i cap no és l’embolcall obligatori de l’altre. Un <article> es pot dividir en diverses <section>, i una <section> pot agrupar diversos <article>. Depèn de quina relació tingui el contingut, no d’una jerarquia fixa.
La part que va caure: l’algorisme d’esquema
Aquí hi ha el gir que ningú no anticipava el 2010. HTML5 prometia un algorisme d’esquema pel qual cada <section> obriria un nivell nou, de manera que es podia escriure <h1> a tot arreu i el nivell real es calcularia sol segons la profunditat.
Aquell algorisme no el va implementar mai cap navegador ni cap tecnologia assistiva, i va acabar retirant-se de l’especificació. Qui se’l va creure i va omplir les seves pàgines d’<h1> imbricats va construir documents que, per a un lector de pantalla, són una llista d’encapçalaments de primer nivell sense jerarquia.
La conseqüència pràctica és que els nivells es posen a mà: un <h1> per pàgina i <h2> a <h6> segons la profunditat real, exactament igual que abans d’HTML5.
El que sí que va guanyar <section>
Una <section> amb nom accessible (un aria-label, o un encapçalament referenciat amb aria-labelledby) s’exposa a les tecnologies assistives com una regió navegable. Sense aquest nom, no aporta res a la navegació.
És a dir: l’etiqueta va acabar tenint un valor real, però condicionat a posar-li títol. Que és, un altre cop, la mateixa regla del principi.
