Elemento section en HTML

Elemento section en HTML

El elemento <section> representa una sección genérica en un documento HTML. Se utiliza para agrupar contenido temáticamente relacionado, típicamente con un encabezado. Piensa en una sección como un capítulo en un libro o una sección en un periódico, donde el contenido tiene una relación temática interna.

<section>
  <h2>Características del producto</h2>
  <p>Este producto ofrece múltiples características innovadoras que lo diferencian de la competencia.</p>
  <ul>
    <li>Alta durabilidad</li>
    <li>Eficiencia energética</li>
    <li>Diseño elegante</li>
    <li>Facilidad de uso</li>
  </ul>
</section>

Características principales

• Es un elemento semántico introducido en HTML5.
• Generalmente incluye un encabezado (h1-h6) para identificar su tema, aunque no es obligatorio.
• Representa una sección temática del contenido, que suele aparecer en el esquema del documento.
• Es un elemento de bloque que ocupa todo el ancho disponible por defecto.
• No tiene atributos específicos más allá de los globales (class, id, etc.).

Cuándo usar el elemento section

El elemento <section> es apropiado en estos casos:

1. Agrupar contenido relacionado temáticamente: Cuando tienes contenido que forma una unidad temática coherente.
2. Crear secciones de una página: Para dividir lógicamente una página web en partes distintas.
3. Cuando el contenido merece aparecer en el esquema del documento: Si es una parte importante de la estructura del documento.

Ejemplos de uso

Secciones básicas de una página web

<main>
  <h1>Todo sobre gatos</h1>

  <section>
    <h2>Razas populares</h2>
    <p>Existen numerosas razas de gatos domésticos, cada una con características únicas.</p>
    <!-- Más contenido sobre razas de gatos -->
  </section>

  <section>
    <h2>Cuidados básicos</h2>
    <p>El cuidado adecuado de tu gato es esencial para su salud y bienestar.</p>
    <!-- Más contenido sobre cuidados de gatos -->
  </section>

  <section>
    <h2>Alimentación</h2>
    <p>Una dieta equilibrada es fundamental para la salud de tu gato.</p>
    <!-- Más contenido sobre alimentación de gatos -->
  </section>
</main>

Sección de testimonios

<section class="testimonials">
  <h2>Lo que dicen nuestros clientes</h2>
  
  <div class="testimonial">
    <blockquote>
      <p>"Este producto cambió mi vida. Lo recomiendo totalmente."</p>
    </blockquote>
    <footer>
      <cite>— María García, Madrid</cite>
    </footer>
  </div>
  
  <div class="testimonial">
    <blockquote>
      <p>"Excelente servicio y atención al cliente. Volveré a comprar sin duda."</p>
    </blockquote>
    <footer>
      <cite>— Juan Pérez, Barcelona</cite>
    </footer>
  </div>
</section>

Sección de características del producto

<section class="features">
  <h2>Características destacadas</h2>
  
  <div class="feature">
    <h3>Diseño ergonómico</h3>
    <p>Diseñado para maximizar la comodidad durante uso prolongado.</p>
  </div>
  
  <div class="feature">
    <h3>Batería de larga duración</h3>
    <p>Hasta 12 horas de uso continuo con una sola carga.</p>
  </div>
  
  <div class="feature">
    <h3>Resistente al agua</h3>
    <p>Certificación IP68 para total protección contra agua y polvo.</p>
  </div>
</section>

Sección de preguntas frecuentes

<section class="faq">
  <h2>Preguntas Frecuentes</h2>
  
  <details>
    <summary>¿Cuánto tiempo tarda el envío?</summary>
    <p>El tiempo de envío estándar es de 3-5 días hábiles para entrega nacional.</p>
  </details>
  
  <details>
    <summary>¿Cuál es la política de devoluciones?</summary>
    <p>Aceptamos devoluciones dentro de los 30 días posteriores a la compra.</p>
  </details>
  
  <details>
    <summary>¿Ofrecen garantía?</summary>
    <p>Sí, todos nuestros productos incluyen 2 años de garantía del fabricante.</p>
  </details>
</section>

Secciones anidadas

Las secciones pueden anidarse cuando es necesario representar una jerarquía temática:

<section class="services">
  <h2>Nuestros Servicios</h2>
  <p>Ofrecemos una amplia gama de servicios profesionales.</p>
  
  <section class="service-category">
    <h3>Diseño Web</h3>
    <p>Soluciones de diseño web adaptadas a sus necesidades.</p>
    
    <div class="service">
      <h4>Diseño Responsivo</h4>
      <p>Sitios web que se adaptan a todos los dispositivos.</p>
    </div>
    
    <div class="service">
      <h4>E-commerce</h4>
      <p>Tiendas online optimizadas para conversión.</p>
    </div>
  </section>
  
  <section class="service-category">
    <h3>Marketing Digital</h3>
    <p>Estrategias efectivas para aumentar su presencia online.</p>
    
    <div class="service">
      <h4>SEO</h4>
      <p>Optimización para motores de búsqueda.</p>
    </div>
    
    <div class="service">
      <h4>Redes Sociales</h4>
      <p>Gestión profesional de sus perfiles sociales.</p>
    </div>
  </section>
</section>

Sección con navegación interna

Una sección puede incluir su propia navegación interna:

<section id="portfolio">
  <header>
    <h2>Nuestro Portafolio</h2>
    <nav aria-label="Filtros de portafolio">
      <ul>
        <li><button class="active" data-filter="all">Todos</button></li>
        <li><button data-filter="web">Diseño Web</button></li>
        <li><button data-filter="app">Aplicaciones</button></li>
        <li><button data-filter="branding">Branding</button></li>
      </ul>
    </nav>
  </header>
  
  <div class="portfolio-items">
    <!-- Proyectos del portafolio -->
    <article class="project" data-category="web">
      <img src="project1.jpg" alt="Proyecto 1">
      <h3>Rediseño web para empresa financiera</h3>
    </article>
    <article class="project" data-category="app">
      <img src="project2.jpg" alt="Proyecto 2">
      <h3>Aplicación móvil de gestión</h3>
    </article>
    <!-- Más proyectos... -->
  </div>
</section>

Section vs Div vs Article

Es importante entender las diferencias entre estos elementos:

• <section>: Representa una sección temática de contenido que generalmente forma parte del esquema del documento.
• <div>: Es un contenedor genérico sin significado semántico, usado principalmente para propósitos de estilo o script.
• <article>: Representa contenido autónomo que podría distribuirse o reutilizarse de forma independiente (como un artículo de blog o comentario).

<!-- Use section for thematic grouping of content -->
<section>
  <h2>Historia de la empresa</h2>
  <p>Nuestra empresa fue fundada en 2010...</p>
</section>

<!-- Use article for self-contained content -->
<article>
  <h2>10 consejos para mejorar tu productividad</h2>
  <p>Publicado el 22 de abril de 2025</p>
  <p>En este artículo exploraremos...</p>
</article>

<!-- Use div when there's no semantic meaning -->
<div class="layout-container">
  <div class="sidebar">
    <!-- Contenido de la barra lateral -->
  </div>
  <div class="main-content">
    <!-- Contenido principal -->
  </div>
</div>

Buenas prácticas

1. Incluye siempre un encabezado: Cada <section> debería comenzar generalmente con un encabezado (h1-h6) que describa su tema.
2. Uso semántico: No uses <section> solo como un contenedor de estilo; para eso está <div>.
3. Jerarquía de encabezados: Mantén una jerarquía lógica de encabezados dentro de las secciones.

   <section>
     <h2>Título de la sección</h2>
     <p>Contenido introductorio...</p>
     
     <section>
       <h3>Subtítulo</h3>
       <p>Más contenido...</p>
     </section>
   </section>
   

4. ARIA roles: En algunos casos, es útil añadir roles ARIA para mejorar la accesibilidad:

   <section aria-labelledby="section-title">
     <h2 id="section-title">Productos destacados</h2>
     <!-- Contenido -->
   </section>
   

5. No abuses: No anides demasiadas secciones sin necesidad semántica real. La estructura del documento debe ser clara y lógica.