HTML semàntic

Què comprova aquesta auditoria

Escaneja el DOM renderitzat i compta els elements semàntics d’HTML5 - <article>, <section>, <nav>, <header>, <footer>, <aside>, <main>, <figure>, <figcaption>, <time> - contra el total d’elements. Les pàgines construïdes gairebé íntegrament amb <div> i <span> niats puntuen baix; les pàgines amb un esquelet semàntic clar puntuen alt.

Per què importa

L’HTML semàntic és la diferència entre marcat que una màquina pot analitzar i marcat que una màquina pot entendre. Un <div class="header"> és invisible per a qualsevol cosa que no llegeixi les teves classes CSS. Un <header> és inequívoc: cada navegador, lector de pantalla, rastrejador de cerca i agent LLM sap quin rol juga aquest bloc a la pàgina.

Tres audiències llegeixen el teu HTML:

• Els agents d’IA (ChatGPT, Perplexity, AI Overviews de Google) extreuen i citen contingut. Tiren de forma fiable de les etiquetes <article>, <main> i <time datetime>. Endevinen dins de la sopa de divs.
• Els lectors de pantalla generen un mapa de landmarks de la pàgina perquè els usuaris puguin saltar directament a la navegació, al contingut principal o al peu. Sense etiquetes semàntiques no hi ha landmarks. Combina aquesta comprovació amb regions landmark ARIA.
• Els motors de cerca ponderen el contingut dins de <article> i <main> més que el contingut dins de contenidors genèrics, i ignoren de forma fiable el boilerplate dins de <nav> i <footer>.

La solució és barata. El cost de no fer-ho s’acumula a cada pàgina del lloc.

Com solucionar-ho

Substitueix els contenidors genèrics amb l’element que descriu el seu rol.

Chrome de la pàgina:

<!-- Abans -->
<div class="site-header">
  <div class="nav">...</div>
</div>
<div class="main-content">...</div>
<div class="site-footer">...</div>

<!-- Després -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Entrades de blog i articles: envolta cada entrada amb <article> i marca les dates amb <time datetime>. L’atribut datetime és llegible per màquina i apareix a cites d’IA i a l’autoextracció de Schema.org.

<article>
  <header>
    <h1>Títol de l'entrada</h1>
    <time datetime="2026-05-11">11 de maig de 2026</time>
  </header>
  <p>Cos de l'entrada...</p>
</article>

Imatges amb peus: utilitza <figure> + <figcaption> quan el peu sigui part del contingut (no només un tooltip al passar el cursor).

<figure>
  <img src="chart.png" alt="Creixement d'ingressos 2024-2026" />
  <figcaption>Ingressos trimestrals, Q1 2024 fins a Q1 2026.</figcaption>
</figure>

Quan usar <section> vs <div>: utilitza <section> per a una regió amb nom de la pàgina, una que tindria un encapçalament en un esquema (Preus, Funcionalitats, FAQ). Utilitza <div> per a agrupament purament presentacional (un embolcall flex, una vora de targeta). Si no pots escriure un encapçalament d’una línia per a ell, és un <div>.

Contrasta el resultat amb regions landmark ARIA i text descriptiu d’enllaços, aquestes comprovacions es reforcen mútuament.

Preguntes freqüents

Importa si faig servir <div role="main"> en lloc de <main>?

Per a l’accessibilitat són equivalents, tots dos exposen un landmark main. Per a la resta (agents d’IA, rastrejadors de cerca, revisors de codi), <main> és més clar i més curt. Utilitza l’element natiu. Els rols ARIA existeixen per pegar elements que no poden expressar el seu rol, no per reemplaçar els que sí poden.

Puc tenir múltiples <header> i <footer> per pàgina?

Sí. <header> i <footer> estan acotats al seu avantpassat de seccionament més proper (<article>, <section>, <main> o el document). Una entrada de blog pot tenir el seu propi <header> (títol + data) dins de <article>, més el <header> de tot el lloc a la part de dalt de la pàgina. <main> és l’excepció, només un per document.

El tema del meu CMS utilitza divs pertot. Val la pena reescriure?

Si controles la plantilla, sí, és una edició única que millora l’accessibilitat, l’SEO i l’extracció per IA de cada pàgina que la fa servir. Si no (un tema allotjat a Shopify/Squarespace), centra’t en l’espai de contingut on tens control: envolta les entrades amb <article>, marca les dates amb <time>, utilitza <figure> per a imatges amb peu. El chrome millorarà quan el tema s’actualitzi.