elemento HTML vigente

<section>

Semántica y estructura de página

Elemento de agrupación temática de contenido que comparte un tema o propósito común dentro de la página, normalmente encabezado con un heading que lo identifica.

<section> es el elemento semántico para agrupaciones temáticas de contenido: bloques que reúnen información relacionada bajo un mismo tema o propósito dentro de la página. El indicador más claro de que algo es una <section> es que tiene un heading (<h2>, <h3>, etc.) que anuncia su tema. Sin ese encabezado identificador, la agrupación probablemente no debería ser <section> — debería ser <div>.

Lo que distingue a <section> de otros contenedores es su alcance contextual: es contenido que tiene sentido como parte de la página en la que está, pero no necesariamente fuera de ella. Una sección “Últimas publicaciones” en un blog solo tiene sentido en ese contexto — si la sacaras de la página, perdería su identidad. Esto es lo opuesto de <article>, que representa contenido que tiene sentido por sí solo, incluso fuera de su contexto original. La pregunta que separa <section> de <article> es justamente esa: ¿este bloque puede vivir solo, fuera de la página? Si no, es <section>. Si sí, es <article>.

<section> genera el landmark ARIA region, pero con una condición importante: solo activa ese landmark si tiene un nombre accesible — ya sea porque tiene un heading dentro (el más común) o porque lleva aria-label o aria-labelledby explícito. Sin nombre accesible, <section> no genera ningún landmark, comportándose como un <div> semántico sin rol. Esto es un diseño deliberado de la especificación: no tiene sentido exponer una “región” en el menú de landmarks si el usuario no puede saber qué región es.

<main> <section> region ✓ <h2>Últimas publicaciones</h2> <article>...</article> <article>...</article> <section> <h2>Categorías</h2> <ul>...</ul> <section> sin heading = sin landmark solo contenido... → usar <div> antipatrón: <section> sin heading temático

Cómo funciona

<section> es un elemento de contenido de sección: contribuye al outline del documento y tiene significado propio como bloque. Su display por defecto es block. El modelo de anidado es flexible: una <section> puede contener <article> (una sección de artículos), y un <article> puede contener <section> (capítulos de un artículo largo). El anidado puede ir en ambas direcciones.

El landmark region que genera <section> solo se activa cuando el elemento tiene un nombre accesible. Las formas de darlo:

  1. Heading interno — el más común y el recomendado:

    <section>
  <h2>Sobre nosotros</h2>
  ...
</section>

  2. aria-labelledby apuntando al id de un heading:

    <section aria-labelledby="sobre-nosotros">
  <h2 id="sobre-nosotros">Sobre nosotros</h2>
  ...
</section>

  3. aria-label directo (cuando no hay heading visible):

    <section aria-label="Galería de imágenes">
  ...
</section>

Modelo de contenido

<section> acepta contenido de flujo. Es válida como hija de <body>, <main>, <article>, otra <section>, <aside> — prácticamente en cualquier contexto que acepte contenido de flujo. No tiene restricciones de contenido más allá de las reglas generales del HTML.

Sintaxis

<main>
  <section>
    <h2>Últimas publicaciones</h2>
    <article>
      <h3>HTML semántico en 2026</h3>
      <p>El HTML semántico mejora la accesibilidad y el SEO...</p>
    </article>
    <article>
      <h3>CSS Grid: guía completa</h3>
      <p>CSS Grid permite diseñar layouts bidimensionales...</p>
    </article>
  </section>

  <section>
    <h2>Categorías</h2>
    <ul>
      <li><a href="/html">HTML</a></li>
      <li><a href="/css">CSS</a></li>
    </ul>
  </section>
</main>

Últimas publicaciones

HTML semántico en 2026

El HTML semántico mejora la accesibilidad y el SEO...

Categorías

Atributos

<section> no tiene atributos propios. Acepta todos los atributos globales de HTML. Los más relevantes en la práctica: aria-labelledby (apunta al id del heading que la nombra), aria-label (cuando no hay heading visible), class e id.

Rol de landmark y accesibilidad

El rol ARIA implícito de <section> es region, pero condicionado a que el elemento tenga un nombre accesible. Sin nombre accesible, <section> tiene rol genérico — no genera ningún landmark en el menú de landmarks.

Esta condición hace que <section> sea el único elemento landmark cuya activación requiere un paso extra. En la práctica, el heading interno es suficiente para que los lectores de pantalla modernos lo reconozcan como región con nombre. Los detalles de implementación varían entre lectores — NVDA, JAWS y VoiceOver los tratan de manera ligeramente distinta, pero el heading interno es el patrón que mejor funciona en todos.

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

Esta es la distinción más importante del módulo. Las tres responden preguntas distintas:

PreguntaRespuestaElemento
¿Este bloque tiene sentido fuera de esta página, solo?Sí (RSS, compartir, reutilizar)<article>
¿Este bloque agrupa contenido bajo un tema con heading?Sí, pero solo en contexto<section>
¿Este bloque solo agrupa para estilo/layout, sin semántica?Ninguna semántica propia<div>

La señal práctica de <section>: si quitás el heading, la sección pierde su identidad. Si eso pasa, probablemente debería ser <section>. Si el heading no importa semánticamente (es solo decoración visual), debería ser <div>.

<section> sin heading = <div>. El antipatrón más común es usar <section> en lugar de <div> para “verse más semántico”. Si la sección no tiene un heading que la identifique, la diferencia es nula — incluso peor, porque <section> sin nombre accesible puede crear entradas confusas en el outline del documento.

Notas, gotchas e interacción

  • El outline del documento y <section>. Históricamente, <section> fue parte de un algoritmo de outline que permitía reiniciar el nivel de headings dentro de cada sección (un <h1> dentro de un <section> anidado equivaldría a un <h3> en el outline). Ese algoritmo nunca fue implementado por los navegadores. En la práctica actual, los niveles de heading deben gestionarse manualmente (<h1> para el título de la página, <h2> para secciones de nivel 1, etc.) sin depender del anidado de <section>.
  • <section> no es un sustituto de <div> para “verse profesional”. Es un error frecuente. Si no hay heading temático, usá <div>.
  • Puede anidarse libremente. <section> dentro de <section>, <section> dentro de <article>, <article> dentro de <section> — todos son válidos. El anidado puede ir en ambas direcciones.
  • No usar para el contenedor raíz del <body>. El <body> ya es el contenedor raíz. Un <section> que envuelve todo el contenido de la página no aporta nada.

Vigente / legacy

<section> está completamente vigente desde HTML5. Su predecesor funcional, <div class="section"> o <div id="sobre-nosotros">, es legacy: no genera el landmark region ni comunica la agrupación temática. El algoritmo de outline basado en <section> (que permitía reiniciar niveles de heading) nunca fue implementado por los navegadores — es una característica descartada de la especificación, no un legacy del elemento en sí. No hay atributos propios de <section> marcados como legacy.