<section>: El elemento de seccin genrica

Baseline Widely available

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

Learn more
See full compatibility

El elemento de HTML <section> representa una seccin genrica independiente de un documento, que no tiene un elemento semntico ms especfico para representarla. Las secciones siempre deben tener un ttulo, con muy pocas excepciones.

Prubalo

<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 seccin genrico, y solo se debe usar si no hay un elemento ms especfico para representarlo. Como ejemplo, un men de navegacin debera estar incluido en un elemento <nav>, pero una lista de resultados de una bsqueda o una visualizacin de mapa y sus controles no tienen elementos especficos y podran colocarse dentro de un <section>.

Tambin podras considerar estos casos:

Si el contenido del elemento representa una unidad atmica e independiente de contenido que tiene sentido distribuirse como una pieza independiente (p. ej. una publicacin o un comentario de blog, o un artculo de peridico), el elemento <article> sera una mejor opcin.
Si los contenidos representan informacin tangencial til que funciona junto con el contenido principal, pero que no forma parte directamente de l (como enlaces relacionados o la biografa de un autor), usa un <aside>.
Si el contenido representa el rea de contenido principal de un documento, usa <main>.
Si solo ests 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 continuacin ejemplos de dnde puede ver un <section> sin encabezado.

Ejemplos

Ejemplo de uso sencillo

Antes

html

<div>
  <h2>Encabezado</h2>
  <p>Un montn de contenido increble</p>
</div>

Resultado

Despus

html

<section>
  <h2>Encabezado</h2>
  <p>Un montn de contenido increble</p>
</section>

Resultado

Usar una seccin 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 ningn sentido tener una seccin separada de contenido sin un encabezado para describir su contenido. Estos ttulos son tiles para todos los lectores, pero particularmente tiles para los usuarios de tecnologas de asistencia como lectores de pantalla, tambin son buenos para el SEO.

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

html

<section>
  <a href="#">Artculo anterior</a>
  <a href="#">Siguiente artculo</a>
</section>

O qu tal algn tipo de barra de botones para controlar tu aplicacin? Puede que no necesariamente necesite un ttulo, pero sigue siendo una seccin 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 tambin podra ser bueno para el SEO, por lo que es una opcin a considerar.

Resumen tcnico

Categoras de contenido	Flujo de contenido, contenido de seccin, contenido palpable.
Contenido permitido	Flujo de contenido.
Omisin 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 implcito	`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`