Dentro del <main>

En la lección anterior armaste el esqueleto de la página: <header>, <nav>, <main>, <footer>. Ahora vas a ver los elementos que van dentro del <main> para organizar su contenido: <section>, <article> y <aside>.

Estos tres elementos suelen confundirse entre sí. Lo más importante es que sus definiciones se iluminan mutuamente — tiene sentido aprenderlos juntos.

---

<section>: agrupación temática

<section> agrupa contenido relacionado bajo un mismo tema. Normalmente lleva un heading (<h2>, <h3>, etc.) que anuncia el tema de esa sección.

<main>
  <section>
    <h2>Últimas noticias</h2>
    <!-- artículos de noticias -->
  </section>

  <section>
    <h2>Categorías</h2>
    <!-- lista de categorías -->
  </section>
</main>

La señal práctica: si quitás el heading, la sección pierde su identidad temática. Si eso pasa, probablemente no debería ser <section> — debería ser un <div>. <section> sin heading temático es el antipatrón más común de este elemento.

<section> genera el landmark region en accesibilidad, pero solo cuando tiene un nombre accesible. Con un heading visible dentro ya alcanza para comunicar el tema; los detalles de accesibilidad avanzada quedan para la sección de Referencia.

---

<article>: contenido autónomo

<article> representa contenido autónomo y redistribuible — una pieza que tiene sentido por sí sola fuera de la página, que podría aparecer en un feed RSS, en un widget de “artículos relacionados” o ser compartida como unidad independiente.

Ejemplos clásicos de <article>:

• Un post de blog.
• Un artículo de noticias.
• Una tarjeta de producto.
• Un comentario de usuario.
• Un widget del clima.

<section>
  <h2>Últimas noticias</h2>

  <article>
    <h3>HTML5 es el estándar vigente</h3>
    <p>El W3C y la WHATWG acordaron en 2019 que el Living Standard...</p>
  </article>

  <article>
    <h3>Por qué usar HTML semántico</h3>
    <p>Los elementos semánticos mejoran la accesibilidad y el SEO...</p>
  </article>
</section>

<article> genera el landmark article — los lectores de pantalla pueden navegar entre artículos con un atajo de teclado.

<article> puede estar anidado. Un <article> puede contener <section> internas (un artículo largo dividido en partes), y una <section> puede contener varios <article> (un listado de posts). El anidado puede ir en ambas direcciones:

<article>
  <header>
    <h2>Guía completa de HTML</h2>
  </header>
  <section>
    <h3>¿Qué es HTML?</h3>
    <p>...</p>
  </section>
  <section>
    <h3>Elementos básicos</h3>
    <p>...</p>
  </section>
  <footer>
    <p>Publicado por Ejemplo</p>
  </footer>
</article>

---

La distinción más difícil: <section> vs <article>

Esta es la pregunta que más confunde en todo el módulo. La clave está en la autonomía:

Criterio	<article>	<section>
¿Tiene sentido solo, fuera de esta página?	Sí (RSS, compartido, embebido)	No — solo en el contexto de la página
¿Es redistribuible?	Sí	No
¿Requiere heading?	No obligatorio, pero recomendado	Sí — sin heading temático, probablemente debería ser <div>
Anidado	Puede estar dentro de <section> o de otro <article>	Puede estar dentro de <article> o de otro <section>

La heurística práctica: preguntate “¿tiene sentido esta pieza sola, fuera de esta página?”.

• Un post de blog → <article>. Podría aparecer en un feed RSS sin el contexto del sitio. ✅
• Una sección “Artículos recientes” dentro del main → <section>. Solo tiene sentido en el contexto de esa página. ✅

<!-- ❌ MAL: usar <section> para contenido autónomo -->
<section>
  <h3>Cómo aprender HTML</h3>
  <p>Este artículo explica los pasos para aprender HTML desde cero.</p>
</section>

<!-- ✅ BIEN: el post tiene sentido solo → <article> -->
<article>
  <h3>Cómo aprender HTML</h3>
  <p>Este artículo explica los pasos para aprender HTML desde cero.</p>
</article>

<!-- ❌ MAL: usar <article> para una agrupación temática sin autonomía -->
<article>
  <h2>Artículos recientes</h2>
  <!-- listado de posts — esto es una sección de la página, no un artículo -->
</article>

<!-- ✅ BIEN: agrupación temática del main → <section> con <article> adentro -->
<section>
  <h2>Artículos recientes</h2>
  <article>...</article>
  <article>...</article>
</section>

---

<aside>: contenido complementario

<aside> representa contenido complementario o tangencial al contenido que lo rodea. No es esencial para entender el contenido principal — si lo quitaras, el lector no perdería la idea central.

Ejemplos de contenido en <aside>:

• Barra lateral con artículos relacionados.
• Publicidad.
• Glosario lateral o definiciones.
• Información biográfica del autor dentro de un artículo.
• Call-to-action de suscripción.

<main>
  <article>
    <h2>CSS Flexbox en profundidad</h2>
    <p>Flexbox es un método de layout unidimensional...</p>
  </article>
</main>

<aside>
  <h2>Artículos relacionados</h2>
  <ul>
    <li><a href="grid.html">CSS Grid: guía completa</a></li>
    <li><a href="responsive.html">Diseño responsive con media queries</a></li>
  </ul>
</aside>

<aside> puede estar dentro de un <article>. Una nota al margen dentro de un artículo largo puede ser <aside> interno:

<article>
  <p>La propuesta de Berners-Lee en 1989 cambió la historia de la comunicación.</p>
  <aside>
    <p>Tim Berners-Lee también creó el primer navegador web y el primer servidor web.</p>
  </aside>
  <p>El primer sitio web todavía existe en info.cern.ch...</p>
</article>

TRAMPA importante: <aside> no significa “la columna de la derecha” en la pantalla. El nombre “aside” se refiere al rol del contenido (tangencial, complementario), no a su posición visual. Sin CSS, un <aside> se apila verticalmente debajo del <main> — eso no es un bug. Colocarlo visualmente a la derecha es trabajo de CSS (Bloque II). Esta es una de las confusiones más comunes del módulo, y en la siguiente lección vas a ver por qué la semántica y el layout son ejes completamente independientes.

<aside> genera el landmark complementary en accesibilidad cuando está al nivel de la página.

<div class="sidebar"> o <div id="aside"> → LEGACY.

---

Todo junto

Con los elementos de L-1 y L-2, una página de blog ficticio puede verse así:

<body>
  <header>
    <img src="logo.svg" alt="TechBlog">
    <nav>
      <ul>
        <li><a href="inicio.html">Inicio</a></li>
        <li><a href="articulos.html">Artículos</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Últimas publicaciones</h2>
      <article>
        <h3>Qué es el HTML semántico</h3>
        <p>El HTML semántico usa elementos que comunican significado...</p>
      </article>
      <article>
        <h3>Por qué usar `<main>` correctamente</h3>
        <p>Un solo `<main>` por página mejora la accesibilidad...</p>
      </article>
    </section>
  </main>

  <aside>
    <h2>Sobre este blog</h2>
    <p>Aprendé desarrollo web desde cero.</p>
  </aside>

  <footer>
    <p>© 2026 TechBlog</p>
  </footer>
</body>

En la siguiente lección vas a ver los contenedores genéricos <div> y <span>, entender cuándo usarlos (y cuándo no), y cerrar el módulo con el concepto de semántica vs layout.