Etiqueta HTML <section>

El elemento HTML <section> es uno de los elementos semánticos de HTML5. Agrupa un bloque de contenido relacionado que forma una parte temática de la página — una parte que, idealmente, aparecería como una entrada en el esquema del documento (un bloque de noticias, un área de "Contáctanos", un capítulo de un artículo largo, etc.).

Esta página explica qué significa <section>, cómo decidir entre <section>, <article> y <div>, por qué una sección casi siempre necesita un encabezado, y la regla de accesibilidad que convierte una sección en un hito de navegación.

Cuándo usar <section> vs <article> vs <div>

Estos tres elementos parecen intercambiables pero tienen significados muy diferentes. Elige según la intención, no por apariencia:

• <section> — una agrupación temática de contenido que pertenece al esquema de la página y tiene su propio encabezado. Úsalo cuando el contenido es "una parte diferenciada de esta página" pero no tiene sentido por sí solo una vez extraído de ella. Ejemplos: un bloque de Introducción, un bloque de Precios, un bloque de Reseñas en una página de producto.
• <article> — una composición autocontenida y distribuible de forma independiente. Úsalo cuando el contenido tendría sentido si lo extrajeras y publicaras en otro lugar (un feed sindicado, una entrada RSS, un resultado de búsqueda). Ejemplos: una entrada de blog, una noticia, un comentario de usuario, una tarjeta de producto.
• <div> — sin ningún significado semántico; una caja genérica que existe únicamente como anclaje de estilos o scripts. Recurre a <div> cuando solo necesitas un contenedor para el diseño (un contenedor flex/grid, una columna) y no hay contenido temático que etiquetar.

Una prueba rápida: si puedes darle al bloque un encabezado significativo, probablemente sea un <section>. Si el bloque podría sostenerse solo como su propia página o elemento de feed, es un <article>. Si solo lo añades para adjuntar CSS o una clase, es un <div>.

El requisito del encabezado

HTML espera que cada <section> esté identificada, y la forma habitual de hacerlo es con un encabezado (<h1>–<h6>). Una sección sin encabezado no tiene un tema claro y produce una entrada confusa, "sin título", en los esquemas de documentos de las tecnologías de asistencia.

Usa el nivel de encabezado que corresponda a la profundidad de anidamiento: un <h2> para una sección de nivel superior bajo el <h1> de la página, un <h3> para una sección anidada un nivel más abajo, y así sucesivamente. Mantén la jerarquía lógica sin saltarte niveles — consulta Encabezados HTML para las reglas.

<h1>Web technologies</h1>

<section>
  <h2>HTML</h2>
  <p>HTML is the standard markup language for creating web pages.</p>
</section>

<section>
  <h2>CSS</h2>
  <p>CSS describes how HTML elements should be presented.</p>
</section>

<section> y accesibilidad: el hito region

Un <section> no es automáticamente un hito al que los usuarios de lectores de pantalla puedan navegar. Solo se convierte en un hito region navegable cuando tiene un nombre accesible. Puedes proporcionarlo de dos maneras:

• aria-labelledby apuntando al id de su encabezado (preferido — el encabezado visible y el nombre accesible se mantienen sincronizados), o
• aria-label con una cadena literal (cuando no hay texto de encabezado visible al que hacer referencia).

Sin nombre, la sección es solo una agrupación para el esquema; con nombre, aparece en la lista de hitos del lector de pantalla.

<section aria-labelledby="pricing-heading">
  <h2 id="pricing-heading">Pricing</h2>
  <p>Choose the plan that fits your team.</p>
</section>

<!-- No visible heading? Name it directly: -->
<section aria-label="Search results">
  <p>3 results found.</p>
</section>

Por eso <section> se diferencia de regiones como <main>, <aside>, <header> y <footer>: esas exponen roles de hito por sí solas, mientras que <section> requiere un nombre para hacerlo.

Sintaxis

La etiqueta <section> viene en pares. El contenido se escribe entre las etiquetas de apertura (<section>) y cierre (</section>).

Ejemplo de la etiqueta HTML <section>:

<!DOCTYPE html>
<html>
  <head>
    <title>Using the section tag</title>
  </head>
  <body>
    <section>
      <h2>Hypertext markup language HTML</h2>
      <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
    </section>
    <section>
      <h2>CSS</h2>
      <p>Formal language, which is used as a description zone, formatting the appearance of a web page, written by the help of markup languages HTML and XHTML, but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>

Resultado

Ejemplo de un <section> anidado dentro de un <article>:

Un fragmento de contenido largo y autocontenido es un <article>; los capítulos dentro de él son elementos <section>. Cada sección lleva su propio encabezado y su propio contenido diferenciado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>A short guide to web technologies</h1>
      <p>Modern web pages are built from three core technologies that work together.</p>

      <section>
        <h2>HTML: structure</h2>
        <p>HTML is the standard markup language for web pages. It describes the structure of a document — headings, paragraphs, links and media — so browsers can render it as a page.</p>
      </section>

      <section>
        <h2>CSS: presentation</h2>
        <p>CSS controls how the structured content looks: colors, spacing, typography and responsive layout across different screen sizes.</p>
      </section>

      <section>
        <h2>JavaScript: behavior</h2>
        <p>JavaScript adds interactivity, letting the page respond to user actions, update content dynamically and communicate with servers.</p>
      </section>
    </article>
  </body>
</html>

Atributos

La etiqueta <section> admite los Atributos Globales y los Atributos de Evento.

Cómo dar estilo a una etiqueta HTML <section>

section {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
}

Práctica