Sempre que un document comença a créixer en contingut, pot ser convenient o inclús necessari dividir-lo en seccions.
Etiquetes semàntiques HTML5
Element header
L’etiqueta header és la forma de definir l’encapçalament de la pàgina HTML. Pot contenir alguns elements de capçalera, però també altres elements com un logotip, capçaleres de secció embolicats, un formulari de recerca, i així successivament.
Element nav
L’etiqueta nav és la que s’ocupa de definir propòsits de navegació. Representa una secció de la pàgina que enllaça a altres pàgines o parts dins la pàgina: una secció amb enllaços de navegació.
Tant podem trobar-lo a dins de l’element header, com un propi element un cop s’ha tancat el header.
L’element section
L’ús de l’element section és la forma més genèrica de dividir el contingut en diferents seccions. A diferència d’altres elements més específics, section només expressa que el contingut delimitat per les seves etiquetes ha estat agrupat (i separat de la resta del contingut) a causa de la seva temàtica.
Una bona pràctica, és precedir els continguts de section amb una capçalera. Aquesta pràctica pot millorar la llegibilitat i permetre a usuaris i navegadors (i altres processadors de documents) escanejar el document a la recerca de parts d’interès sense haver de processar tot el text per tal de trobar la informació que estan buscant.
Element article
L’etiqueta article representa una composició autònoma en un document, pàgina, aplicació o lloc, que està destinada a ser distribuir de forma independent o reutilitzables.
Això podria ser un missatge del fòrum, un article d’una revista o un diari, una entrada de blog, un objecte, o qualsevol altre element independent del contingut.
Element footer
L’etiqueta footer marca el contingut que correspon al peu de pàgina del document.
Un peu de pàgina sol contenir informació sobre l’autor de la secció, les dades de drets d’autor o enllaços a documents relacionats.
Encapçalaments i nivells
En versions prèvies de l’estàndard, els encapçalaments eren usats per definir seccions. Els navegadors i processadors de documents usaven la informació proveïda pels encapçalaments per crear un resum del contingut del document. Amb l’arribada d’HTML5 i els seus elements de secció, això ha canviat.
En aquest nou escenari, els elements de secció són els responsables de la divisió del contingut mentre que els encapçalaments proveeixen un títol per als continguts de cada secció. Quan aquest enfocament és utilitzat, l’encapçalament (habitualment un h1) precedeix a tot el contingut en la secció i proveeix una descripció concisa sobre el mateix.
Ara afegirem una secció al voltant de tot el contingut de l’exemple anterior, per veure què passa amb l’encapçalament i els seus nivells.
Com veus, els encapçalaments de les seccions que conté per la secció exterior (“Geografia” i “Població”) són ara de nivell dos. Això té sentit ja que tots dos són sub-títols del primer encapçalament. Però HTML5 no requereix que les coses siguin així. Una capçalera h1 és el principal títol de la secció en la qual es troba, i no del document sencer, de manera que els autors són lliures de fer servir una o altra configuració.
Element main
L’element main descriu el contingut principal d’una pàgina.
El propòsit principal d’aquesta etiqueta és des d’un punt de vista d’accessibilitat, ja que ajuda a que tecnologies assistencials puguin identificar on comença el contingut principal de la pàgina i on acaba.
Segons l’especificació: l’element main representa el contingut principal del cos (body) d’un document.
L’element main només pot ser usat una sola vegada per pàgina, cosa que sembla bastant obvi si pensem seu propòsit. Utilitza més d’un element main, farà que el nostre HTML sigui vàlid per a la W3C.
Aquest element no pot ser fill de cap dels següents: header, nav, article, aside i footer.