Reto práctico: página de artículo con semántica completa

Ejercicio integrador: construye una página de artículo con header, navegación, contenido principal, aside y footer. Puedes ver la solución para comparar.

En este reto aplicarás todo lo visto: estructura del documento, semántica, encabezados, listas, enlaces e imágenes.

El objetivo es una página de artículo, por ejemplo una entrada de blog, con header, menú de navegación, contenido principal, barra lateral y pie de página.

Intenta hacerlo tú primero; si te atascas o quieres contrastar, revisa la solución propuesta.

  • Construye una página HTML completa y semántica.
  • Crea un documento HTML válido con doctype, lang, charset, viewport, title y meta description que represente una página de artículo con la siguiente estructura: un header con el título del sitio y un nav con al menos tres enlaces; un main con un article que contenga un h1, dos o tres párrafos y una imagen con alt descriptivo; un aside con una lista de enlaces relacionados; y un footer con un párrafo de cierre, por ejemplo copyright o créditos.
  • Usa solo HTML: sin CSS ni JavaScript. La jerarquía de encabezados, con un único h1 y después h2 si hace falta, debe ser correcta.
  • Header: título del sitio o logo en texto.
  • Nav: enlaces de navegación como Inicio, Artículos o Contacto.

Enunciado del reto

Construye una página HTML completa y semántica.

Crea un documento HTML válido con doctype, lang, charset, viewport, title y meta description que represente una página de artículo con la siguiente estructura: un header con el título del sitio y un nav con al menos tres enlaces; un main con un article que contenga un h1, dos o tres párrafos y una imagen con alt descriptivo; un aside con una lista de enlaces relacionados; y un footer con un párrafo de cierre, por ejemplo copyright o créditos.

Usa solo HTML: sin CSS ni JavaScript. La jerarquía de encabezados, con un único h1 y después h2 si hace falta, debe ser correcta.

  • Header: título del sitio o logo en texto.
  • Nav: enlaces de navegación como Inicio, Artículos o Contacto.
  • Main > Article: título `h1`, párrafos y una imagen con `alt`.
  • Aside: lista de enlaces relacionados u otros artículos.
  • Footer: texto de cierre.

Solución de referencia

Una posible solución para que compares con la tuya.

La solución que ves en el ejemplo siguiente cumple el enunciado: documento válido, semántica correcta y todos los bloques pedidos. Puedes usarla para revisar etiquetas, orden y atributos como `alt` o `href`.

HTML
24

Reto práctico: página de artículo con semántica completa

Ejercicio integrador: construye una página de artículo con header, navegación, contenido principal, aside y footer. Puedes ver la solución para comparar.

Código del tema: <header> · <main> · <footer>

📘 Teoría

Enunciado del reto

Construye una página HTML completa y semántica.

Crea un documento HTML válido con doctype, lang, charset, viewport, title y meta description que represente una página de artículo con la siguiente estructura: un header con el título del sitio y un nav con al menos tres enlaces; un main con un article que contenga un h1, dos o tres párrafos y una imagen con alt descriptivo; un aside con una lista de enlaces relacionados; y un footer con un párrafo de cierre, por ejemplo copyright o créditos.

Usa solo HTML: sin CSS ni JavaScript. La jerarquía de encabezados, con un único h1 y después h2 si hace falta, debe ser correcta.

  • Header: título del sitio o logo en texto.
  • Nav: enlaces de navegación como Inicio, Artículos o Contacto.
  • Main > Article: título `h1`, párrafos y una imagen con `alt`.
  • Aside: lista de enlaces relacionados u otros artículos.
  • Footer: texto de cierre.

Solución de referencia

Una posible solución para que compares con la tuya.

La solución que ves en el ejemplo siguiente cumple el enunciado: documento válido, semántica correcta y todos los bloques pedidos. Puedes usarla para revisar etiquetas, orden y atributos como `alt` o `href`.

🧪 Aprende probando

Ejemplo Tu solución Escribe aquí tu página completa. Luego compara con la solución de referencia.
Ejemplo Solución de referencia (puedes ver el código) Solución completa del reto: artículo con header, nav, main, article, aside y footer. Úsala para comparar con tu código.

🧰 Recursos

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .