Organización del contenido en HTML5 — Fundamentos de HTML y CSS

• La etiqueta <section>
• La etiqueta <article>
• La etiqueta <aside>
• Diferencia entre <section>, <article> y <aside>
• Ejemplo Completo con <section>, <article> y <aside>
• Resumen

Ahora que sabemos cómo estructurar una página con <header>, <nav>, <main> y <footer>, vamos a ordenar bien el contenido dentro de <main>.

La etiqueta <section>

💡 Ejemplos de cuándo usar <section>:

• Secciones de una página de inicio ("Nosotros", "Servicios", "Testimonios").
• Diferentes partes de un artículo extenso.
• Un área con "Testimonios" y otra con "Casos de Éxito".

<main>
  <section>
    <h2>Sobre Nosotros</h2>
    <p>Somos una empresa con más de 10 años de experiencia en tecnología.</p>
  </section>

  <section>
    <h2>Nuestros Servicios</h2>
    <p>Ofrecemos desarrollo web, diseño UX/UI y marketing digital.</p>
  </section>
</main>

La etiqueta <article>

💡 Ejemplos de cuándo usar <article>:

• Publicaciones de blog o noticias.
• Comentarios de usuarios.
• Tarjetas de productos en una tienda online.

<main>
  <article>
    <h2>Cómo aprender HTML desde cero</h2>
    <p>HTML es el lenguaje fundamental para crear páginas web...</p>
  </article>

  <article>
    <h2>Ventajas del diseño responsive</h2>
    <p>Un diseño adaptable mejora la experiencia del usuario...</p>
  </article>
</main>

La etiqueta <aside>

💡 Ejemplos de cuándo usar <aside>:

• Un bloque con "Artículos relacionados".
• Publicidad o anuncios dentro de una página.
• Información extra sobre el contenido principal.

<aside>
  <h2>Artículos Relacionados</h2>
  <ul>
    <li><a href="#">Cómo mejorar tu sitio web</a></li>
    <li><a href="#">SEO para principiantes</a></li>
    <li><a href="#">Diseño UX/UI: Consejos básicos</a></li>
  </ul>
</aside>

Diferencia entre <section>, <article> y <aside>

Para entender la diferencia, imaginemos una revista:

📰 <section> → Como una sección de la revista.
Agrupa contenido relacionado dentro de una página, pero por sí sola no tiene un significado completo. Forma parte de algo más grande, como una categoría o un capítulo dentro de un sitio web.

📰 <article> → Como un artículo independiente.
Es un contenido autónomo que puede entenderse sin necesidad de contexto adicional. Ejemplos incluyen noticias, publicaciones de blog o comentarios en un foro.

📰 <aside> → Como un recuadro con información extra.
Contiene contenido complementario, como notas al margen, anuncios o enlaces relacionados, pero no es parte del contenido principal.

Ejemplo Completo con <section>, <article> y <aside>

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Resumen