I quan utilitzar ARTICLE, ASIDE i DIV
El nou element SECCIÓ HTML5 pot ser alguna cosa confús. Si heu estat creant documents HTML abans d'HTML5, és probable que ja feu servir l'element per crear divisions estructurals dins de les vostres pàgines i, a continuació, feu un estil amb les pàgines. Per tant, pot semblar natural substituir els elements DIV existents amb elements SECTION. Però això és tècnicament incorrecte. Per tant, si no reemplaça els elements DIV amb elements de SECCIÓ, com els utilitzeu correctament?
L'element SECTION és un element semàntic
El primer que cal entendre és que l'element SECTION és un element semàntic . Això vol dir que proporciona significat tant als agents d'usuari com als humans sobre el contingut tancat que hi ha, específicament una secció del document.
Això pot semblar una descripció semàntica molt general, i és perquè és. Hi ha altres elements HTML5 que proporcionen més distincions semàntiques al vostre contingut que primer heu d'utilitzar abans d'utilitzar l'element SECTION:
- ARTICLE
- ASIDE
- NAV
Quan s'utilitza l'element SECCIÓ
Utilitzeu l'element ARTICLE quan el contingut sigui una part independent del lloc que es pugui allotjar i es sindicarà com un article o una publicació de bloc. Utilitzeu l'element ASIDE quan el contingut estigui relacionat tangencialment amb el contingut de la pàgina o el mateix lloc, com ara barres laterals, anotacions, notes al peu o informació del lloc associada. Utilitzeu l'element NAV per al contingut que és la navegació.
L'element SECTION és un element semàntic genèric. L'utilitza quan cap dels altres elements contenidors semàntics és apropiat. L'utilitzeu per combinar parts del vostre document junts en unitats discretes que podeu descriure d'alguna manera relacionades. Si no podeu descriure els elements de la secció en una o dues frases, probablement no hauríeu d'utilitzar l'element.
En el seu lloc, haureu d'utilitzar l'element DIV. L'element DIV en HTML5 és un element contenidor no semàntic. Si el contingut que intenteu combinar no té un significat semàntic, però encara heu de combinar-lo per a l'estil, llavors l'element DIV és l'element adequat a utilitzar.
Com funciona l'element SECCIÓ
Una secció del document pot aparèixer com a contenidor exterior per a articles i elements ASIDE. També pot contenir contingut que no forma part d'ARTICLE ni ASIDE. També es pot trobar un element SECTION dins d'un ARTICLE, NAV o ASIDE. Fins i tot podeu nidar seccions per indicar que un grup de contingut és una secció d'un altre grup de contingut que és una secció d'un article o de la pàgina en general.
L'element SECTION crea elements dins d'un esbós del document. I, com a tal, sempre ha de tenir un element de capçalera (H1 a H6) com a part de la secció. Si no podeu obtenir un títol de la secció, de nou, l'element DIV és probablement més apropiat. Recordeu, si no voleu que el títol de la secció aparegui a la pàgina, sempre podeu emmascarar-lo amb CSS.
Quan no s'utilitzi l'element SECCIÓ
Més enllà dels consells anteriors per utilitzar els elements semàntics més específics en primer lloc, hi ha una àrea definitiva que no hauria d'utilitzar l'element SECTION: només per a estil.
En altres paraules, si l'única raó per la qual esteu posant un element en aquest lloc és adjuntar propietats d'estil CSS, no hauria d'utilitzar un element SECTION. Trobeu un element semàntic o utilitzeu l'element DIV.
En última instància, no pot importar
Una dificultat per escriure l'HTML semàntic és que el que és semàntic pot ser absurd. Si creieu que podeu justificar l'ús de l'element SECTION en els vostres documents, us heu d'utilitzar. La majoria dels agents d'usuari no els importa i mostraran la pàgina tal com podríeu esperar si escriviu un DIV o una SECCIÓ.
Per als dissenyadors que vulguin ser semànticament correctes, és important l'ús de l'element SECTION d'una manera semànticament vàlida. Per als dissenyadors que només volen que funcionin les seves pàgines, això no és tan important. Crec que escriure HTML vàlidament semàntic és una bona pràctica i manté les pàgines més a prova de futur. Però al final li correspon.