La Etiqueta SECTION

Es un elemento semántico que permite agrupar contenido temático relacionado, como capítulos, secciones de una página o bloques independientes.

La etiqueta <section> en HTML5 es un elemento semántico que permite agrupar contenido temático relacionado, como capítulos, secciones de una página o bloques independientes. Su propósito es estructurar el documento de manera significativa, mejorando la accesibilidad, el SEO y la mantenibilidad del código. A continuación, te explicamos cómo usarla correctamente.

¿Qué es la etiqueta `<section>`?

Propósito: Definir secciones temáticas en un documento (ejemplo: "Noticias", "Servicios", "Contacto").
Semántica: Indica que el contenido dentro de la etiqueta forma una unidad lógica.
No es un contenedor genérico: A diferencia de <div>, <section> debe tener un título (como <h2>) y contenido relacionado.

Sintaxis básica

<section>
  <h2>Título de la sección</h2>
  <!-- Contenido relacionado -->
</section>

Ejemplo mínimo:

<section>
  <h2>Nuestros Servicios</h2>
  <p>Ofrecemos diseño web, marketing digital y consultoría.</p>
</section>

Diferencias entre `<section>`, `<div>`, `<article>` y `<main>`

Etiqueta	Propósito
`<section>`	Agrupa contenido temático con un título.
`<div>`	Contenedor genérico sin significado semántico.
`<article>`	Representa contenido autónomo (ejemplo: un post, noticia o comentario).
`<main>`	Define el contenido principal único de la página.

Ejemplo con <article>:

<article>
  <h2>Título del artículo</h2>
  <p>Contenido independiente...</p>
</article>

Casos de uso comunes

a) Secciones de una página web

<section>
  <h2>Últimas Noticias</h2>
  <div class="noticias">
    <!-- Lista de noticias -->
  </div>
</section>

b) Capítulos de un artículo

<article>
  <h1>Cómo aprender HTML</h1>
  <section>
    <h2>Introducción a las etiquetas</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Semántica en HTML5</h2>
    <p>...</p>
  </section>
</article>

c) Bloques temáticos en el cuerpo

<body>
  <main>
    <section>
      <h2>Productos Destacados</h2>
      <!-- Galería de productos -->
    </section>
    <section>
      <h2>Testimonios</h2>
      <!-- Comentarios de clientes -->
    </section>
  </main>
</body>

Buenas prácticas

Incluye un encabezado: Siempre agrega un título (<h1>-<h6>) dentro de <section>.
Evita el uso excesivo: No uses <section> como reemplazo de <div>.
Anidación: Puedes anidar secciones para jerarquizar contenido.
Accesibilidad: Usa roles ARIA si es necesario (aunque <section> ya tiene semántica propia).

Personalización con CSS

Puedes estilizar <section> como cualquier otro elemento:

section {
  background: #f8f9fa;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

section h2 {
  color: #2c3e50;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Blog de Tecnología</title>
  <style>
    section {
      background: #fff;
      padding: 25px;
      margin: 20px auto;
      max-width: 800px;
      border: 1px solid #eee;
    }
    section h2 {
      color: #007bff;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <header>
    <h1>Blog de Tecnología</h1>
  </header>

  <main>
    <section>
      <h2>Inteligencia Artificial</h2>
      <p>La IA está transformando industrias como la salud y el transporte...</p>
    </section>

    <section>
      <h2>Desarrollo Web</h2>
      <p>HTML5 y CSS3 son la base del diseño web moderno...</p>
    </section>
  </main>

  <footer>
    <p>© 2023 Blog de Tecnología</p>
  </footer>
</body>
</html>

Errores comunes

Secciones sin título: Incorrecto:

<section>
  <p>Contenido sin encabezado...</p>
</section>

Uso como contenedor genérico:

<section class="contenedor">
  <div>...</div>
</section>

Accesibilidad

Los lectores de pantalla reconocen <section> como una sección temática.
Combina con encabezados (<h2>, <h3>) para mejorar la navegación.

Conclusión

La etiqueta <section> es una herramienta esencial para estructurar contenido de manera semántica en HTML5. Al usarla correctamente:

Mejoras la accesibilidad para usuarios y motores de búsqueda.
Organizas el código de forma clara y mantenible.
Facilitas la estilización con CSS.

Recuerda:

Siempre incluye un título dentro de <section>.
Diferenciar entre <section>, <article> y <div>.
Jerarquiza el contenido con secciones anidadas si es necesario.

¡Empieza a usar <section> para crear páginas web mejor estructuradas y profesionales!

¿Qué es la etiqueta <section>?