<section>: El elemento de sección genérica - HTML: Lenguaje de etiquetas de hipertexto | MDN

Toggle sidebar

Theme

OS default
Light
Dark

Español

Remember language Learn more

<section>: El elemento de sección genérica

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.

El elemento de HTML <section> representa una sección genérica independiente de un documento, que no tiene un elemento semántico más específico para representarla. Las secciones siempre deben tener un título, con muy pocas excepciones.

Pruébalo

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>

h1,
h2 {
  margin: 0;
}

Atributos

Este elemento solo incluye los atributos globales.

Notas de uso

Como se mencionó anteriormente, <section> es un elemento de sección genérico, y solo se debe usar si no hay un elemento más específico para representarlo. Como ejemplo, un menú de navegación debería estar incluido en un elemento <nav>, pero una lista de resultados de una búsqueda o una visualización de mapa y sus controles no tienen elementos específicos y podrían colocarse dentro de un <section>.

También podrías considerar estos casos:

Si el contenido del elemento representa una unidad atómica e independiente de contenido que tiene sentido distribuirse como una pieza independiente (p. ej. una publicación o un comentario de blog, o un artículo de periódico), el elemento <article> sería una mejor opción.
Si los contenidos representan información tangencial útil que funciona junto con el contenido principal, pero que no forma parte directamente de él (como enlaces relacionados o la biografía de un autor), usa un <aside>.
Si el contenido representa el área de contenido principal de un documento, usa <main>.
Si solo estás usando el elemento como contenedor de estilo, usa un <div> en su lugar.

Para reiterar, cada <section> debe identificarse, normalmente incluyendo un encabezado (un elemento h1 - h6) como hijo del elemento <section>, siempre que sea posible. Vea a continuación ejemplos de dónde puede ver un <section> sin encabezado.

Ejemplos

Ejemplo de uso sencillo

Antes

html
<div>
  <h2>Encabezado</h2>
  <p>Un montón de contenido increíble</p>
</div>

Resultado

Después

html
<section>
  <h2>Encabezado</h2>
  <p>Un montón de contenido increíble</p>
</section>

Resultado

Usar una sección sin encabezado

Las circunstancias en las que es posible que veas <section> sin un encabezado generalmente se encuentran en secciones de aplicaciones web/IU en lugar de en estructuras de documentos tradicionales. En un documento, realmente no tiene ningún sentido tener una sección separada de contenido sin un encabezado para describir su contenido. Estos títulos son útiles para todos los lectores, pero particularmente útiles para los usuarios de tecnologías de asistencia como lectores de pantalla, también son buenos para el SEO.

Considera, sin embargo, un mecanismo de navegación secundario. Si la navegación global ya está envuelta en un elemento <nav>, es posible que puedas envolver un menú anterior/siguiente en una <section>:

html
<section>
  <a href="#">Artículo anterior</a>
  <a href="#">Siguiente artículo</a>
</section>

¿O qué tal algún tipo de barra de botones para controlar tu aplicación? Puede que no necesariamente necesite un título, pero sigue siendo una sección distinta del documento:

html
<section>
  <button class="reply">Responder</button>
  <button class="reply-all">Responder a todos</button>
  <button class="fwd">Reenviar</button>
  <button class="del">Eliminar</button>
</section>