<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 July 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

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>

Resultado

Dependiendo del contenido, incluir un encabezado también podría ser bueno para el SEO, por lo que es una opción a considerar.

Resumen técnico

Categorías de contenido Flujo de contenido, contenido de sección, contenido palpable.
Contenido permitido Flujo de contenido.
Omisión de etiqueta Ninguna, tanto la etiqueta inicial como la final son obligatorias.
Padres permitidos Cualquier elemento que acepte flujo de contenido. Ten en cuenta que un elemento <section> no debe ser un descendiente de un elemento <address>.
Rol ARIA implícito region si el elemento tiene un nombre accesible, de lo contrario generic
Roles ARIA permitidos alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel
Interfaz en el DOM HTMLElement

Especificaciones

Specification
HTML Standard
# the-section-element

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también