En resum
Què es comprova
la proporció de contenidors amb significat davant del total de contenidors de la pàgina.
Etiquetes que compten
header, nav, main, article, section, aside i footer, davant de div i span.
Per què importa
les tecnologies de suport s’orienten amb aquestes etiquetes; els contenidors genèrics no diuen res.
Severitat a Wakaris
Millora. No trenca res, però deixa la pàgina muda per a qui no la veu.
Què és i què comprova aquesta troballa
L’HTML té etiquetes que descriuen el paper de cada bloc de la pàgina. La documentació de MDN les defineix una per una: header agrupa el contingut introductori, nav conté la navegació principal, main és el contingut únic d’aquesta pàgina i es fa servir una sola vegada, article tanca un bloc que s’entén per si sol, section agrupa una part temàtica, aside recull el que acompanya sense ser el contingut central i footer tanca la pàgina.
Davant d’aquestes set hi ha el contenidor genèric. MDN ho diu sense embuts: els div «no aporten cap valor semàntic, només atapeeixen el teu codi HTML», i recomana fer-los servir «només quan no hi ha una solució semàntica millor». Aquesta troballa salta quan la balança s’inclina massa cap a aquest costat: la pàgina està construïda, però no està descrita. Wakaris la classifica en dos graus, mitjà i baix, segons quanta estructura queda sense descriure.
Com es comprova
Wakaris analitza l’HTML de l’URL que li indiquis i calcula la proporció entre els contenidors que tenen significat i el total de contenidors de la pàgina, sense instal·lar res. Aquesta és la via directa per saber com està construïda la teva: et retorna el grau de la troballa i la seva severitat dins de l’àrea tècnica.
Convé entendre què mesura i què no. És una comprovació d’estructura, no de contingut: compta com està embolcallat el text, no si el text és bo ni si les etiquetes estan ben triades. Una pàgina que embolcalla el menú en main i el cos en nav tindria una bona proporció i una estructura equivocada, així que la proporció és un indici, no un veredicte.
Hi ha dos punts que el catàleg del checker no fixa i convé saber-ho en llegir l’informe: on és exactament el tall entre grau mitjà i grau baix, i si el recompte inclou els contenidors que crea el mateix codi en muntar-se la pàgina. L’informe lliura el grau, no la fórmula.
Per què importa
El benefici més ben documentat és l’orientació de qui no veu la pantalla. La tècnica H101 del W3C, associada al criteri 1.3.1 de les WCAG, descriu com set d’aquestes etiquetes produeixen regions identificables de manera automàtica, i la documentació de web.dev explica que el navegador construeix amb elles un arbre d’accessibilitat que els lectors de pantalla fan servir per recórrer la pàgina. Amb contenidors genèrics aquest mapa no existeix i la pàgina es recorre a cegues.
El segon motiu és de manteniment, i MDN l’enumera entre els avantatges: trobar un bloc concret és molt més fàcil que remenar entre contenidors interminables.
Convé ser exacte amb el tercer front, el cercador, perquè és on més s’exagera. Google afirma a la seva guia d’iniciació al SEO que «la web en general no és HTML vàlid, així que la Cerca de Google rarament pot dependre de significats semàntics amagats a l’especificació d’HTML». Dit clar: això es fa per les persones que fan servir la web i per l’equip que la manté, no per posicionar.
Causes habituals
La causa més freqüent no és el desconeixement, és el flux de treball. Un disseny es tradueix a blocs visuals i cada bloc s’embolcalla en un contenidor genèric amb classes d’estil: el resultat es veu exactament com el disseny i no descriu res. MDN avisa just d’això, que els contenidors genèrics són tan còmodes que se’n fa un ús excessiu.
La segona causa són els constructors visuals i les plantilles. Generen la maquetació niant contenidors per aconseguir columnes, marges i animacions, i diverses capes de niament per cada secció visible és el normal. La pàgina funciona; la proporció s’enfonsa.
La tercera és l’aplicació muntada amb marcs de JavaScript, on cada component aporta el seu propi embolcall i l’estructura final és una suma de peces que ningú no va dissenyar com a document.
I la quarta és l’arrossegament històric: una web amb anys a sobre sol tenir la maquetació antiga sota un redisseny recent.
Com solucionar-ho
Comença per saber en quin punt ets: Wakaris et dona el grau de la troballa sobre la teva pàgina real, i a partir d’aquí l’arranjament es fa per capes i sense tocar l’aspecte.
El primer i més rendible són les quatre grans zones. Substitueix el contenidor de la capçalera per header, el del menú per nav, el del cos per main —una sola vegada per pàgina— i el del peu per footer. Són quatre canvis d’etiqueta que conserven les classes i els estils, i són els que produeixen les regions que descriu la tècnica H101 del W3C.
Després baixa al contingut: cada entrada, fitxa o targeta que s’entengui per si sola passa a article, cada apartat temàtic a section, i l’accessori a aside.
Finalment, poda. Els contenidors que només existien per col·locar coses i que avui sobren amb la maquetació moderna es poden treure: la documentació de web.dev considera excessiu un arbre de més de 1.400 nodes, i aprimar-lo també accelera la pàgina.
Esquema de les set etiquetes semàntiques d’estructura col·locades sobre l’esquelet d’una pàgina web
Brief per generar la imatge
Il·lustració editorial per a una guia tècnica de Wakaris. Tema: Esquema de les set etiquetes semàntiques d’estructura col·locades sobre l’esquelet d’una pàgina web. Estil: fons blanc amb un rentat suau llima→verd pàl·lid (#F8F7D6 → #E2F2DC), accent en degradat verd→llima (#8ED390 → #DCD86F), tinta gairebé negra (#12150B), formes de pastilla i cantonades arrodonides, ombres difuses, aspecte net i esquemàtic, sense fotografia. Format: 16:9, 1440 píxels d’amplada. Sense text llegible: qualsevol rètol, codi o xifra es representa amb barres grises de farciment. El significat el porta el peu de foto, no la imatge. Sense logotips reals ni marques de tercers. Sense persones reconeixibles. Etiquetes: esquema, etiquetes, semàntiques, estructura, col·locades, sobre, esquelet, pàgina
Pregunta-li a la teva IA
Si vols aprofundir en el teu cas concret, copia un d’aquests dos prompts i enganxa’l a la IA que facis servir. Tria segons la teva situació.
Ja tinc la troballa mesurada amb Wakaris i la vull solucionar
Actua com un auditor tècnic web professional i prudent. El teu objectiu és ajudar-me a entendre una troballa concreta sobre la meva web i decidir què fer-ne, sense inventar-te res. Context: he obtingut aquesta troballa amb Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. La troballa és: Ús d’HTML semàntic. Mesura quina proporció dels contenidors de la meva pàgina són etiquetes que diuen què és cada part (header, nav, main, article, section, aside, footer) davant de contenidors genèrics (div, span). Referència: la troballa té dos graus, mitjà i baix, segons quanta estructura queda sense descriure. Enganxa aquí el resultat de Wakaris: quin grau t’ha sortit i a quina pàgina. Si no el tens, digues-m’ho i et diré com obtenir-lo abans de continuar. Regles que has de seguir en tot moment: 1. No donis res per fet sobre la meva web. Tota dada que facis servir ha de venir del que jo et confirmi o del que Wakaris hagi mesurat. Si no ho saps, pregunta-m’ho abans d’afirmar-ho. 2. Abans de donar-me conclusions, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per saber si aquesta troballa m’afecta de debò i per on: a) En quina plataforma està la teva web? (WordPress, Shopify, web a mida, una altra) b) La maquetació la va fer un constructor visual, una plantilla comprada o es va programar a mida? c) Saps si la teva pàgina ja té una capçalera, un menú, un cos i un peu clarament delimitats al codi, o no ho has mirat mai? d) Qui pot tocar les plantilles: tu des del tauler, un tècnic intern o una agència? e) Tens moltes pàgines construïdes amb la mateixa plantilla, o cadascuna és diferent? f) T’ha reportat algú alguna vegada problemes per navegar la teva web amb lector de pantalla o només amb teclat? 3. Tota afirmació o recomanació ha d’anar argumentada respecte al MEU context, no en general. Si em recomanes alguna cosa, explica’m per què s’aplica al meu cas. 4. Marca sempre el teu nivell de certesa. Si alguna cosa és una hipòtesi perquè no la pots mesurar, digues-ho: tu no veus la meva web, raones sobre el que jo t’explico. 5. No em proposis canvis tècnics irreversibles o de risc (tocar plantilles en producció, substituir etiquetes a tot el lloc d’un cop) sense avisar-me abans del risc i que convé una còpia de seguretat o un entorn de prova. 6. Canviar una etiqueta de contenidor pot trencar estils o scripts que en depenien. Avisa’m d’aquesta possibilitat i ajuda’m a planificar el canvi zona per zona, comprovant l’aspecte després de cada pas. 7. Si necessites una dada que només s’obté analitzant la web (confirmar el grau real o si l’arranjament ha funcionat), digues-m’ho i recomana’m tornar a passar la pàgina per Wakaris: això es comprova, no s’endevina. 8. La decisió final és meva, no teva. El teu paper és ajudar-me a entendre i a preparar l’acció, no decidir per mi. 9. Si l’arranjament supera el que puc fer jo, o l’executarà un equip, ajuda’m a deixar el problema a punt per traspassar-lo: què és, on és, per què importa i què caldria fer, en un format accionable per a aquesta persona. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/inteligencia-artificial/uso-de-html-semantico Per comprovar-ho o tornar-ho a comprovar: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol i fent-me el primer bloc de preguntes.
Encara no ho he comprovat i vull saber si la meva web té aquest problema
Actua com un auditor tècnic web professional i prudent. Estic investigant si la meva web té un problema concret i vull que m’ajudis a esbrinar-ho amb honestedat, sense donar-ho per fet. Context: hi he arribat a través de Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. El problema que vull investigar és: Ús d’HTML semàntic. Es tracta de si la meva pàgina està construïda amb etiquetes que diuen què és cada part (header, nav, main, article, section, aside, footer) o gairebé només amb contenidors genèrics (div, span). Encara NO sé si la meva web el té: ho vull esbrinar. Regles que has de seguir en tot moment: 1. El primer i més important: això es comprova mirant el codi de la pàgina, i tu no pots veure la meva web des d’aquesta conversa. Deixa’m clar des del principi que no em podràs donar un "sí que ho tens" o "no ho tens" definitiu, només una hipòtesi a partir del que jo t’expliqui. 2. No donis res per fet. Abans de donar-me cap valoració, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per estimar si és probable que tingui el problema: a) Com es va fer la teva web: amb un constructor visual, amb una plantilla comprada, amb un gestor de continguts estàndard o programada a mida? b) Quants anys té la maquetació actual? S’ha redissenyat a sobre d’una d’anterior? c) És una web de pàgines normals o una aplicació que es munta sola al navegador? d) Qui la manté avui: tu, un tècnic intern, una agència o ningú? e) Has rebut alguna vegada una queixa sobre navegar-hi amb lector de pantalla o només amb teclat? f) Saps si algú va revisar l’accessibilitat de la web en algun moment? 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui, argumentada segons el que t’he dit i marcada explícitament com a hipòtesi, no com a diagnòstic. 4. Digues-me de manera directa que l’única manera de saber-ho de debò és comprovar-ho, i que ho puc fer gratis i sense crear compte passant la meva web per Wakaris, que em donarà el grau real i de passada l’estat de les altres àrees. 5. Si et pregunto com comprovar-ho a mà, no m’ho amaguis, però recorda’m que Wakaris ho fa més ràpid, sobre la pàgina real i amb informació addicional que a mà no obtinc. 6. Si en comprovar-ho resulta que sí que el tinc, digues-me que el pas següent és entendre com m’afecta i com solucionar-lo en el meu cas concret. 7. La conclusió i la decisió són meves, no teves. Tu m’ajudes a orientar-me. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/inteligencia-artificial/uso-de-html-semantico Per comprovar-ho: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol, deixant clar el punt 1, i fent-me el bloc de preguntes.
Preguntes freqüents
Quines etiquetes compten com a semàntiques? +
Les que descriuen el paper d’un bloc: header, nav, main, article, section, aside i footer. La tècnica H101 del W3C recull set elements que produeixen regions identificables. Davant d’elles, div i span són contenidors sense significat: serveixen per agrupar i col·locar, res més.
Això millora la meva posició a Google? +
No hi comptis. Google afirma que la web en general no és HTML vàlid i que el seu cercador rarament pot dependre de significats amagats a l’especificació. El motiu per fer-ho bé és que la pàgina es pugui recórrer sense veure-la i que l’equip la mantingui sense perdre’s.
N’hi ha prou de posar-li un rol al contenidor genèric? +
Funciona, però és fer una volta. La mateixa tècnica H101 del W3C assenyala que els navegadors moderns no necessiten que s’hi afegeixi el rol equivalent: escriure main role="main" és innecessari i n’hi ha prou amb main. Canviar l’etiqueta costa el mateix i deixa el codi més net.
Quants contenidors genèrics són massa? +
No hi ha una xifra publicada per a aquesta troballa: Wakaris lliura un grau, mitjà o baix, no un percentatge de tall. Com a referència d’un altre ordre, la documentació de web.dev considera excessiu un arbre de més de 1.400 nodes, i les capes de contenidors sobrants són una de les maneres d’arribar-hi.
Fonts citades
- developer.mozilla.orgStructuring documents, MDN: definició de
header,nav,main,article,section,asideifooter, i l’avís sobre l’abús de contenidors genèrics. - developer.mozilla.orgSemantics, MDN: què és un element semàntic i la llista d’avantatges, inclòs el de trobar blocs de codi davant de contenidors interminables.
- web.devSemantic HTML, web.dev: rols implícits, regions de referència i l’arbre d’accessibilitat que fan servir els lectors de pantalla.
- w3.orgH101: Using semantic HTML elements to identify regions of a page, W3C: relació amb el criteri 1.3.1, les set etiquetes amb regió pròpia i la innecessitat de repetir el rol.
- developers.google.comSEO Starter Guide, Google Search Central: la web en general no és HTML vàlid i la Cerca rarament pot dependre de significats semàntics de l’especificació.
- web.devHow large DOM sizes affect interactivity, web.dev: el llindar de 1.400 nodes com a arbre excessiu i el seu efecte sobre la renderització.
Actualitzat: 8 de setembre de 2026.
Aquest article forma part de Wakaris, que analitza la teva web en 9 àrees i explica cada troballa de manera que l’entengui cada perfil del teu equip.