Maquetación Web Dinámica / HTML5 desde cero: el esqueleto

Reto de módulo: el periódico digital (solo HTML)

Reto50 min60 XP

Llegó la prueba del módulo. Vas a hacer exactamente lo que hace un maquetador profesional al empezar cualquier proyecto real: construir la estructura semántica completa ANTES de pensar en estilos. Sin CSS. Se verá "feo" — y estará perfecto.

Reto

Maqueta la estructura semántica de un periódico digital

Media45 min60 XP(×2 sin mirar la solución)

Qué debes construir

Un archivo periodico.html con la estructura completa de la portada de un periódico digital llamado "El Observador". Requisitos:

Head completo: charset, viewport, title con el formato Portada | El Observador, meta description y favicon.
Header con el nombre del periódico (h1) y un nav con 4 secciones: Política, Deportes, Cultura, Tecnología (lista de enlaces).
Main con:
- Un article de noticia principal: h2 titular, un párrafo de resumen, una imagen con alt y dimensiones, y la fecha.
- Una section "Más noticias" (con su h2) que contenga 3 articles secundarios, cada uno con h3 titular y párrafo.
Un aside "Lo más leído" con una lista ordenada de 5 titulares.
Footer con el copyright y un nav secundario (Contacto, Términos, Privacidad).
Una tabla dentro del main: "El clima hoy" con 3 ciudades (columnas: Ciudad, Mínima, Máxima — con sus scope).

Reglas

Cero CSS. Ni etiqueta style, ni atributos de estilo. Solo estructura.
Cada pieza usa su etiqueta semántica — un div en este reto es una alarma.
Jerarquía de headings sin saltos: h1 → h2 → h3.
La imagen puede ser cualquier archivo local o un servicio de placeholder como https://placehold.co/800x400.
Valida mentalmente al final: ¿un lector de pantalla podría saltar a la noticia principal? ¿Google entendería qué es cada bloque?

45:00

Cuando estés listo, arranca el reloj.

El razonamiento, antes del código: un periódico es EL caso de uso para el que se diseñó la semántica de HTML5 (por eso la analogía de la lección 4). Las decisiones clave son tres. Primera: todo lo que es noticia es un article — principal o secundaria, cada una vive sola. Segunda: "Más noticias" es una section porque agrupa articles bajo un título temático. Tercera: "Lo más leído" es un aside con ol — es contenido relacionado pero secundario, y el ranking ES el mensaje, así que la lista va ordenada.

periodico.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Portada | El Observador</title>
  <meta name="description"
        content="Las noticias de política, deportes, cultura y tecnología, contadas con rigor.">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
</head>
<body>
  <header>
    <h1>El Observador</h1>
    <nav>
      <ul>
        <li><a href="politica.html">Política</a></li>
        <li><a href="deportes.html">Deportes</a></li>
        <li><a href="cultura.html">Cultura</a></li>
        <li><a href="tecnologia.html">Tecnología</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Titular de la noticia principal del día</h2>
      <p>El resumen que engancha: qué pasó, dónde y por qué importa.</p>
      <img src="https://placehold.co/800x400" alt="Descripción de la foto de la noticia" width="800" height="400">
      <p>Publicado el 13 de julio de 2026</p>
    </article>

    <section>
      <h2>Más noticias</h2>
      <article>
        <h3>Titular secundario uno</h3>
        <p>Resumen breve de la noticia.</p>
      </article>
      <article>
        <h3>Titular secundario dos</h3>
        <p>Resumen breve de la noticia.</p>
      </article>
      <article>
        <h3>Titular secundario tres</h3>
        <p>Resumen breve de la noticia.</p>
      </article>
    </section>

    <section>
      <h2>El clima hoy</h2>
      <table>
        <thead>
          <tr>
            <th scope="col">Ciudad</th>
            <th scope="col">Mínima</th>
            <th scope="col">Máxima</th>
          </tr>
        </thead>
        <tbody>
          <tr><th scope="row">Bogotá</th><td>9°</td><td>19°</td></tr>
          <tr><th scope="row">Medellín</th><td>17°</td><td>27°</td></tr>
          <tr><th scope="row">Cali</th><td>19°</td><td>30°</td></tr>
        </tbody>
      </table>
    </section>

    <aside>
      <h2>Lo más leído</h2>
      <ol>
        <li><a href="#">Titular más leído</a></li>
        <li><a href="#">Segundo más leído</a></li>
        <li><a href="#">Tercero más leído</a></li>
        <li><a href="#">Cuarto más leído</a></li>
        <li><a href="#">Quinto más leído</a></li>
      </ol>
    </aside>
  </main>

  <footer>
    <p>© 2026 El Observador</p>
    <nav>
      <ul>
        <li><a href="contacto.html">Contacto</a></li>
        <li><a href="terminos.html">Términos</a></li>
        <li><a href="privacidad.html">Privacidad</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

Fíjate en los detalles que valen puntos: los dos nav (principal y de footer) son válidos — nav marca navegación, no "el menú de arriba"; la fecha va en un párrafo simple por ahora (existe una etiqueta time que conocerás pronto); y el aside vive dentro de main porque es contenido relacionado con esta página, no decoración global.

¿Tu solución es distinta a esta? Puede estar perfecta igual: la semántica tiene decisiones con más de una respuesta defendible. Lo innegociable: un solo h1, jerarquía sin saltos, articles para las noticias y cero divs.

Qué sigue

Módulo 2 completo: sabes construir el esqueleto de cualquier página. En el módulo 3 llega lo que estabas esperando desde el día uno: CSS — la piel, los colores, el diseño. Y tu periódico feo se convertirá en uno hermoso.