Patrones de estructura para páginas reales: portada, listados, fichas y artículos

Ya conoces las piezas: landmarks, encabezados, listas, tablas y semántica del texto. En un proyecto real no se marcan página a página, sino en plantillas: la portada, el listado de noticias, la ficha de un trámite o de un producto, el artículo. En un gestor de contenidos cada plantilla se reutiliza en cientos de páginas, de modo que un error en ella se multiplica y una corrección también. Esta lección propone un esqueleto común y los patrones de marcado de los tipos de página más habituales, con los fallos que más se repiten en sedes electrónicas y tiendas en línea.

El esqueleto común

Casi todas las páginas de un sitio comparten la misma estructura exterior. Si esta parte está bien, el resto se apoya en ella:

<body>
  <a href="#contenido" class="salto">Saltar al contenido principal</a>
  <header>
    <a href="/">Ayuntamiento de Ejemplo - Inicio</a>
    <nav aria-label="Principal">…</nav>
    <search>…</search>
  </header>
  <main id="contenido">
    <h1>Tema de esta página</h1>
    …
  </main>
  <footer>…</footer>
</body>

Tres decisiones están tomadas aquí para todo el sitio: el <h1> vive dentro de <main> (el logotipo no es el encabezado principal de cada página), los bloques repetidos están en landmarks con nombre y el enlace de salto apunta al contenido principal (su comportamiento con el teclado lo verás en el curso de teclado y foco).

article y section: cuándo usar cada uno

Son los dos elementos de agrupación que más se confunden:

• <article> es una composición autónoma, que tendría sentido sola fuera de la página: una noticia, una entrada de blog, un comentario, una tarjeta de producto o de evento. Se expone con el rol article, y algunos lectores permiten saltar de un artículo al siguiente.
• <section> es una parte temática de algo más grande y debería empezar con un encabezado. Recuerda que, como vimos en la lección de landmarks, solo se convierte en región si tiene nombre accesible; sin él, para las tecnologías de apoyo equivale a un <div>.
• <div> sigue siendo correcto cuando solo agrupas para maquetar. No es un fallo: lo es usarlo para algo que tiene semántica propia.

Un detalle que sorprende: <header> y <footer> dentro de un <article> o de un <section> no son landmarks de cabecera y pie del sitio. Puedes usarlos para la cabecera de una noticia (título, fecha, autoría) sin crear un segundo banner.

Portada y listados: tarjetas que se entienden

Portadas, resultados de búsqueda, catálogos y agendas comparten un patrón: una colección de tarjetas. Bien marcadas, la persona puede saber cuántas hay, saltar de una a otra por encabezados y entender cada enlace fuera de contexto.

<h2>Últimas noticias</h2>
<ul>
  <li>
    <article>
      <img src="obras.jpg" alt="">
      <h3><a href="/noticias/obras-calle-mayor">Comienzan las obras de la calle Mayor</a></h3>
      <p><time datetime="2025-03-04">4 de marzo de 2025</time></p>
      <p>La calle permanecerá cortada al tráfico durante seis semanas.</p>
    </article>
  </li>
  …
</ul>

Las claves del patrón:

• La colección es una lista: el lector anuncia «lista de 6 elementos».
• Cada tarjeta tiene un encabezado con el nivel que le corresponde en la jerarquía (aquí <h3> bajo el <h2> de la sección), no el que mejor queda.
• El enlace está en el título. Si el diseño pide que toda la tarjeta sea pulsable, amplía el área del enlace con CSS (un pseudoelemento posicionado sobre la tarjeta) en lugar de envolver toda la tarjeta en un <a>.
• La imagen que repite la información del título es decorativa en este contexto y lleva alt="".

<a href="/noticias/obras-calle-mayor" class="tarjeta">
  <img src="obras.jpg" alt="Obras">
  <div class="titulo">Comienzan las obras…</div>
  <p>La calle permanecerá cortada…</p>
  <span>Leer más</span>
</a>

Fichas de trámite y de producto

La ficha es la página de destino: la persona llega buscando un dato concreto y quiere encontrarlo rápido. El <h1> es el nombre del trámite o del producto. Las partes previsibles («Requisitos», «Documentación», «Plazos», «Tasas», «Cómo presentarlo») son <h2>, en el mismo orden en todas las fichas del sitio. Los datos de resumen que aparecen arriba en muchas sedes electrónicas encajan en una lista de definiciones:

<dl>
  <dt>Plazo</dt><dd>Todo el año</dd>
  <dt>Órgano responsable</dt><dd>Servicio de Urbanismo</dd>
  <dt>Presentación</dt><dd>Electrónica y presencial</dd>
</dl>

Las tasas o las variantes de un producto (tallas, precios por tramo) son tablas de datos como las de la lección de tablas, y los trámites relacionados van en un <aside> con nombre. En una ficha de producto, el precio, las opciones y el botón de compra deben seguir en el código el mismo orden lógico que en pantalla.

Contenido incrustado: el título del iframe

Los mapas, los vídeos, los formularios de pago o los calendarios de terceros suelen incrustarse con <iframe>. Un marco es un documento dentro del documento y necesita un nombre accesible que diga qué contiene; la técnica habitual es el atributo title, y un marco sin nombre se suele registrar como incumplimiento de 4.1.2 Nombre, función, valor.

<iframe src="https://…/mapa" title="Mapa de ubicación de la Oficina de Atención Ciudadana"></iframe>
<p>Dirección: Plaza Mayor, 1, planta baja.</p>

El contenido del marco debe ser accesible en sí mismo (es otro documento, con su propio lang y su propio <title>), y los datos esenciales de un mapa, como la dirección, deben estar también en texto.

Plantillas y gestores de contenido

En WordPress, Drupal o cualquier gestor, la estructura se decide en dos sitios. El tema o la plantilla genera el esqueleto, los landmarks y las tarjetas de los listados: ahí trabaja el equipo de desarrollo, una sola vez. El editor genera el contenido de cada página: ahí trabaja quien publica, cada día. Para que la estructura sobreviva:

• Revisa el marcado que generan el tema, los bloques y los complementos, no solo el diseño; algunos constructores visuales producen muchos <div> anidados y encabezados elegidos por su tamaño.
• Limita en el editor lo que no debe usarse: por ejemplo, impide insertar un <h1> en el cuerpo si la plantilla ya lo genera con el título.
• Asegúrate de que los widgets de barras laterales y pies no imponen niveles de encabezado arbitrarios.
• Ofrece a quien redacta bloques con la semántica ya resuelta (tabla con encabezados, cita, lista de documentos) en lugar de pedirle que la construya a mano.

Resumen

• Marca la estructura en las plantillas: un error o una corrección se multiplica por todas las páginas que las usan.
• <article> para piezas autónomas, <section> con encabezado para partes temáticas y <div> solo para maquetar.
• Los listados son listas de tarjetas con encabezado propio y el enlace en el título, sin envolver la tarjeta entera en un <a>.
• Las fichas siguen un esquema de <h2> constante, con <dl> para los datos de resumen y tablas para tasas o variantes.
• Todo <iframe> necesita un title que describa su contenido (4.1.2) y los datos esenciales también en texto.