Tutorial: dale estructura semántica a tu página

Si tu página es puro <div> por todos lados, técnicamente funciona, pero es como etiquetar todas las cajas de una mudanza como "cosas". HTML semántico le pone nombre a cada caja.

Paso 1: identifica las partes de tu página

Una página típica tiene: un encabezado, un menú de navegación, contenido principal y un pie de página. HTML tiene una etiqueta para cada uno:

<header>
  <h1>Mi sitio</h1>
  <nav>
    <a href="/">Inicio</a>
    <a href="/sobre-mi">Sobre mí</a>
  </nav>
</header>

<main>
  <h2>Bienvenido</h2>
  <p>Este es el contenido principal de la página.</p>
</main>

<footer>
  <p>&copy; 2026 Mi sitio</p>
</footer>

Paso 2: agrupa contenido relacionado con <section> y <article>

<main>
  <section>
    <h2>Mis proyectos</h2>
    <article>
      <h3>Proyecto 1</h3>
      <p>Descripción del proyecto.</p>
    </article>
    <article>
      <h3>Proyecto 2</h3>
      <p>Descripción del proyecto.</p>
    </article>
  </section>
</main>

<article> es para contenido que tiene sentido por sí solo (un post, una tarjeta de producto). <section> agrupa contenido relacionado dentro de una página. No hay examen sorpresa, pero ahora tu HTML se explica solo.

Paso 3: por qué importa (además de verse bonito)

• Los lectores de pantalla usan estas etiquetas para navegar la página más rápido.
• Google entiende mejor de qué trata tu contenido (mejor SEO, gratis).
• Tu futuro yo, leyendo este código en seis meses, no va a querer llorar.

¿Qué acabas de aprender?

• Las etiquetas header, nav, main, footer, section y article.
• Por qué el HTML semántico ayuda a la accesibilidad y al SEO.
• Que cambiar <div> por la etiqueta correcta no cuesta nada extra.