Curso HTML 10.3 Contenido principal y secciones (section, article, aside)

10.3 Contenido principal y secciones (section, article, aside)

En HTML5 se introdujeron varios elementos semánticos destinados a estructurar el contenido de manera clara y accesible. Los principales son <main>, <section>, <article> y <aside>. A continuación profundizamos en cada uno de ellos, observando sus usos, diferencias y ejemplos prácticos.

1. Elemento <main>

Propósito

El elemento <main> identifica el contenido central de un documento. Solo debe haber un <main> por página y no puede estar dentro de <header>, <footer>, <nav> ni <aside>.

Características

• Contiene la información esencial de la página.
• Mejora la accesibilidad: los lectores de pantalla pueden saltar directamente al contenido principal.
• Se complementa con roles ARIA (role='main') si es necesario.

Ejemplo de uso

<!-- Definición de la estructura principal -->
<main>
  <section>
    <h2>Bienvenida</h2>
    <p>Este es el contenido principal de la página.</p>
  </section>
</main>
  

2. Elemento <section>

¿Cuándo usarlo?

<section> agrupa contenido temáticamente relacionado y suele llevar un encabezado propio (<h2>…<h6>). Se aplica cuando necesitas una división lógica dentro de la página.

Ejemplos de uso típico

• Secciones de un artículo largo (introducción, desarrollo, conclusión).
• Bloques temáticos de una landing page.
• Grupos de preguntas frecuentes.

Ejemplo práctico

<sectión principal de la página>
<section>
  <h2>Características del producto</h2>
  <ul>
    <li>Alta calidad</li>
    <li>Fácil de usar</li>
    <li>Soporte 24/7</li>
  </ul>
</section>

<section>
  <h2>Opiniones de clientes</h2>
  <p>“Me encantó el producto…” – Juan Pérez</p>
</section>
  

3. Elemento <article>

Definición

Un <article> contiene un fragmento de contenido autónomo e independiente, que podría distribuirse fuera del contexto de la página (por ejemplo, entradas de blog, noticias, comentarios, widgets).

Ventajas

• Ideal para motores de búsqueda y redes sociales: se pueden extraer de forma aislada.
• Mejora la portabilidad y reusabilidad.

Ejemplo de artículo

<article>
  <header>
    <h2>Cómo aprender HTML5</h2>
    <time datetime='2024-06-15'>15 de junio de 2024</time>
  </header>
  <p>HTML5 es la última versión del lenguaje de marcado para la Web....</p>
  <footer>
    <p>Autor: Ana García</p>
  </footer>
</article>
  

4. Elemento <aside>

Concepto

<aside> define contenido que está indirectamente relacionado con el contenido principal y generalmente se presenta en un margen o barra lateral.

Uso típico

• Bloques de publicidad.
• Enlaces relacionados o recursos adicionales.
• Información complementaria: biografías, definiciones, avisos.

Ejemplo práctico

<main>
  <section>
    <h2>Artículo principal</h2>
    <p>Contenido de referencia...</p>
  </section>
  <aside>
    <h3>Artículos relacionados</h3>
    <ul>
      <li><a href='#'>Enlace 1</a></li>
      <li><a href='#'>Enlace 2</a></li>
    </ul>
  </aside>
</main>
  

5. Comparativa rápida

Conclusión

El uso adecuado de <main>, <section>, <article> y <aside> no solo organiza tu sitio de manera más clara, sino que también mejora la accesibilidad, el SEO y la mantenibilidad del código. Asegúrate de emplear cada elemento según su propósito semántico y evita abusar de <div> genéricos cuando existen alternativas más descriptivas.