Ejercicio: HTML semántico

⏱ 25 minutos
📶 Nivel: principiante

Objetivo

Estructurar una página de inicio completa usando solo etiquetas semánticas, sin <div>.

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Crea inicio.html con el esqueleto completo, lang="es" y un title.
Agrega un <header> con el nombre de tu sitio en un <h1>.
Dentro del <header>, crea un <nav> con aria-label="Principal" y una lista de 3 enlaces.
Agrega un único <main> con dos <section>, cada una con su <h2>.
En una de las secciones, agrega dos <article> con título <h3>, párrafo y una fecha con <time datetime>.
Agrega un <aside> con un dato curioso o un enlace relacionado.
Agrega un <footer> con © año, tu nombre y una <address> con un correo.
Revisa que no haya <div> innecesarios y que exista un solo <main> y un solo <h1>.

💡 Pista 1: no sé si usar section o article

Pregúntate: ¿esto podría publicarse solo y seguir teniendo sentido? Si sí, es article. Si es un apartado de la página con un tema propio, es section.

💡 Pista 2: ¿dónde va el aside?

Puede ir dentro de <main> si se relaciona con ese contenido, o junto a <main> si es una barra lateral general. En este ejercicio, déjalo dentro de <main>.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código HTML (el archivo completo)

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

inicio.html (dentro de body)

<header>
  <h1>Diario de aprendizaje</h1>
  <nav aria-label="Principal">
    <ul>
      <li><a href="inicio.html">Inicio</a></li>
      <li><a href="notas.html">Notas</a></li>
      <li><a href="contacto.html">Contacto</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Bienvenida</h2>
    <p>Aquí registro lo que voy aprendiendo de HTML.</p>
  </section>

  <section>
    <h2>Últimas entradas</h2>
    <article>
      <h3>Mi primera tabla</h3>
      <p><time datetime="2026-10-04">4 de octubre de 2026</time></p>
      <p>Hoy aprendí a combinar celdas.</p>
    </article>
    <article>
      <h3>Formularios</h3>
      <p><time datetime="2026-10-05">5 de octubre de 2026</time></p>
      <p>Descubrí que cada campo necesita su etiqueta.</p>
    </article>
  </section>

  <aside>
    <h2>Dato curioso</h2>
    <p>HTML fue creado en 1991.</p>
  </aside>
</main>

<footer>
  <p>© 2026 Diario de aprendizaje</p>
  <address>Contacto: <a href="mailto:hola@ejemplo.com">hola@ejemplo.com</a></address>
</footer>

💡 🏁 Reto extra (opcional)

Toma la página de recomendaciones de la lección 2 o el Top 5 de la lección 3 y conviértela a una estructura semántica completa. ¿Qué cambió en el código? ¿Y en lo que ve la persona?