Patrons d'estructura per a pàgines reals: portada, llistats, fitxes i articles

Ja coneixes les peces: landmarks, encapçalaments, llistes, taules i semàntica del text. En un projecte real no es marquen pàgina per pàgina, sinó en plantilles: la portada, el llistat de notícies, la fitxa d'un tràmit o d'un producte, l'article. En un gestor de continguts cada plantilla es reutilitza en centenars de pàgines, de manera que un error s'hi multiplica i una correcció també. Aquesta lliçó proposa un esquelet comú i els patrons de marcatge dels tipus de pàgina més habituals, amb les errades que més es repeteixen a seus electròniques i botigues en línia.

L'esquelet comú

Gairebé totes les pàgines d'un lloc web comparteixen la mateixa estructura exterior. Si aquesta part està bé, la resta s'hi recolza:

<body>
  <a href="#contenido" class="salto">Salta al contingut principal</a>
  <header>
    <a href="/">Ajuntament d'Exemple - Inici</a>
    <nav aria-label="Principal">…</nav>
    <search>…</search>
  </header>
  <main id="contenido">
    <h1>Tema d'aquesta pàgina</h1>
    …
  </main>
  <footer>…</footer>
</body>

Aquí hi ha tres decisions preses per a tot el lloc web: l'<h1> viu dins de <main> (el logotip no és l'encapçalament principal de cada pàgina), els blocs repetits són en landmarks amb nom i l'enllaç de salt apunta al contingut principal (el seu comportament amb el teclat el veuràs al curs de teclat i focus).

article i section: quan fer servir cadascun

Són els dos elements d'agrupació que més es confonen:

• <article> és una composició autònoma, que tindria sentit sola fora de la pàgina: una notícia, una entrada de blog, un comentari, una targeta de producte o d'esdeveniment. S'exposa amb el rol article, i alguns lectors permeten saltar d'un article al següent.
• <section> és una part temàtica d'una cosa més gran i hauria de començar amb un encapçalament. Recorda que, com vam veure a la lliçó de landmarks, només es converteix en regió si té nom accessible; sense nom, per a les tecnologies de suport equival a un <div>.
• <div> continua sent correcte quan només agrupes per maquetar. No és una errada: ho és fer-lo servir per a una cosa que té semàntica pròpia.

Un detall que sorprèn: <header> i <footer> dins d'un <article> o d'un <section> no són landmarks de capçalera i peu del lloc web. Els pots fer servir per a la capçalera d'una notícia (títol, data, autoria) sense crear un segon banner.

Portada i llistats: targetes que s'entenen

Portades, resultats de cerca, catàlegs i agendes comparteixen un patró: una col·lecció de targetes. Ben marcades, la persona pot saber quantes n'hi ha, saltar d'una a l'altra per encapçalaments i entendre cada enllaç fora de context.

<h2>Últimes notícies</h2>
<ul>
  <li>
    <article>
      <img src="obras.jpg" alt="">
      <h3><a href="/noticias/obras-calle-mayor">Comencen les obres del carrer Major</a></h3>
      <p><time datetime="2025-03-04">4 de març de 2025</time></p>
      <p>El carrer romandrà tallat al trànsit durant sis setmanes.</p>
    </article>
  </li>
  …
</ul>

Les claus del patró:

• La col·lecció és una llista: el lector anuncia «llista de 6 elements».
• Cada targeta té un encapçalament amb el nivell que li correspon a la jerarquia (aquí <h3> sota l'<h2> de la secció), no el que queda millor.
• L'enllaç és al títol. Si el disseny demana que tota la targeta es pugui prémer, amplia l'àrea de l'enllaç amb CSS (un pseudoelement posicionat sobre la targeta) en lloc d'embolcallar tota la targeta en un <a>.
• La imatge que repeteix la informació del títol és decorativa en aquest context i porta alt="".

<a href="/noticias/obras-calle-mayor" class="tarjeta">
  <img src="obras.jpg" alt="Obres">
  <div class="titulo">Comencen les obres…</div>
  <p>El carrer romandrà tallat…</p>
  <span>Llegeix-ne més</span>
</a>

Fitxes de tràmit i de producte

La fitxa és la pàgina de destinació: la persona hi arriba buscant una dada concreta i la vol trobar ràpidament. L'<h1> és el nom del tràmit o del producte. Les parts previsibles («Requisits», «Documentació», «Terminis», «Taxes», «Com presentar-ho») són <h2>, en el mateix ordre a totes les fitxes del lloc web. Les dades de resum que apareixen a dalt en moltes seus electròniques encaixen en una llista de definicions:

<dl>
  <dt>Termini</dt><dd>Tot l'any</dd>
  <dt>Òrgan responsable</dt><dd>Servei d'Urbanisme</dd>
  <dt>Presentació</dt><dd>Electrònica i presencial</dd>
</dl>

Les taxes o les variants d'un producte (talles, preus per tram) són taules de dades com les de la lliçó de taules, i els tràmits relacionats van en un <aside> amb nom. En una fitxa de producte, el preu, les opcions i el botó de compra han de seguir al codi el mateix ordre lògic que a la pantalla.

Contingut incrustat: el títol de l'iframe

Els mapes, els vídeos, els formularis de pagament o els calendaris de tercers se solen incrustar amb <iframe>. Un marc és un document dins del document i necessita un nom accessible que digui què conté; la tècnica habitual és l'atribut title, i un marc sense nom se sol registrar com a incompliment del 4.1.2 Nom, funció, valor.

<iframe src="https://…/mapa" title="Mapa d'ubicació de l'Oficina d'Atenció Ciutadana"></iframe>
<p>Adreça: Plaça Major, 1, planta baixa.</p>

El contingut del marc ha de ser accessible en si mateix (és un altre document, amb el seu propi lang i el seu propi <title>), i les dades essencials d'un mapa, com l'adreça, també han de ser en text.

Plantilles i gestors de continguts

A WordPress, Drupal o qualsevol gestor, l'estructura es decideix en dos llocs. El tema o la plantilla genera l'esquelet, els landmarks i les targetes dels llistats: aquí hi treballa l'equip de desenvolupament, una sola vegada. L'editor genera el contingut de cada pàgina: aquí hi treballa qui publica, cada dia. Perquè l'estructura sobrevisqui:

• Revisa el marcatge que generen el tema, els blocs i els complements, no només el disseny; alguns constructors visuals produeixen molts <div> imbricats i encapçalaments triats per la seva mida.
• Limita a l'editor el que no s'ha de fer servir: per exemple, impedeix inserir un <h1> al cos si la plantilla ja el genera amb el títol.
• Assegura't que els ginys de barres laterals i peus no imposen nivells d'encapçalament arbitraris.
• Ofereix a qui redacta blocs amb la semàntica ja resolta (taula amb encapçalaments, cita, llista de documents) en lloc de demanar-li que la construeixi a mà.

Resum

• Marca l'estructura a les plantilles: un error o una correcció es multiplica per totes les pàgines que les fan servir.
• <article> per a peces autònomes, <section> amb encapçalament per a parts temàtiques i <div> només per maquetar.
• Els llistats són llistes de targetes amb encapçalament propi i l'enllaç al títol, sense embolcallar la targeta sencera en un <a>.
• Les fitxes segueixen un esquema d'<h2> constant, amb <dl> per a les dades de resum i taules per a taxes o variants.
• Tot <iframe> necessita un title que descrigui el seu contingut (4.1.2) i les dades essencials també en text.