Referencia de etiquetas

Etiqueta section en HTML: secciones temáticas y diferencias

La etiqueta <section> agrupa contenido relacionado por un tema dentro de un documento. Sirve para separar partes reconocibles de una página, como los requisitos y el temario de un curso. Úsala cuando el grupo tenga un tema propio que puedas identificar, normalmente mediante un encabezado.

Ejemplo mínimo: requisitos del curso

Coloca este fragmento dentro del <body> de una página que ya tenga un <h1> con el nombre del curso:

<section aria-labelledby="requisitos">
  <h2 id="requisitos">Requisitos del curso</h2>
  <p>Solo necesitas un navegador y un editor.</p>
</section>

Verás el encabezado y el párrafo debajo. El contenido forma una sección temática; aria-labelledby="requisitos" la nombra mediante el texto del encabezado cuyo id coincide. El atributo no escribe un segundo título en pantalla.

Para probarlo, guarda el fragmento en un documento HTML con codificación UTF-8 y ábrelo en el navegador. No necesita CSS, JavaScript ni recursos externos. Si retiras únicamente <section> y </section>, el título y el párrafo siguen visibles, pero desaparece el contenedor temático y su región accesible nombrada.

Sintaxis y contexto válido

Escribe apertura y cierre: <section>...</section>. Ninguna de las dos etiquetas puede omitirse; <section /> tampoco cierra el elemento en HTML.

Es contenido de flujo y de seccionamiento. Admite contenido de flujo, como encabezados, párrafos, listas y otras secciones, donde ese contenido esté permitido: por ejemplo, dentro de <body>, <main> o <article>. Debes respetar las restricciones del contexto y de sus descendientes. No la coloques dentro de <p>, que admite contenido de frase, ni dentro de <address>, que excluye contenido de seccionamiento.

No exige un id en todos los casos. Tampoco es un contenedor genérico para aplicar estilos: su elección comunica una división temática. Estas reglas corresponden al modelo de contenido de section y a las restricciones de address.

Section frente a article y div

La elección depende del contenido, no del borde o del tamaño del bloque:

Contenido y etiqueta	Ejemplo y criterio
`<section>`: parte temática.	Los requisitos dentro de una página de curso.
`<article>`: pieza independiente.	Una ficha completa reutilizable en un catálogo.
`<div>`: agrupación genérica.	Un marco visual que reúne los apartados.

¿Section y article son intercambiables? No. Que un bloque tenga título no basta para hacerlo independiente. «Requisitos» puede necesitar el nombre y la explicación del curso; una ficha completa con esos datos podría ser un <article> y contener varias <section>.

Consulta la guía de <article> para piezas independientes y la de <div> para contenedores genéricos. Si buscas identificar todo el contenido principal de la página, corresponde <main>, que puede contener ambas estructuras.

Encabezados de una sección

Elige el nivel según la jerarquía del documento. Si el curso se titula con <h1>, sus apartados principales usan <h2>; un subtema del temario puede usar <h3>. Anidar una <section> no convierte automáticamente un <h1> en <h2> ni corrige niveles mal elegidos. El tamaño de letra se ajusta con CSS.

¿Section siempre necesita un encabezado? Un encabezado descriptivo es la opción habitual, especialmente en páginas de lectura. Su modelo de contenido no impone tenerlo. En una aplicación puede existir una sección cuyo propósito ya queda claro por el contexto y sus controles, sin añadir un título visible a cada bloque. Esa excepción necesita una razón concreta; no justifica convertir cada envoltorio del diseño en sección. Un nombre ARIA tampoco reemplaza la utilidad de un encabezado visible para los lectores.

Consulta los encabezados y la estructura en el estándar y la guía de <h1> a <h6>.

Caso práctico: una ficha con requisitos y temario

Guarda este documento completo como curso.html, en UTF-8, y ábrelo directamente. Incluye sus estilos y no utiliza scripts ni otros archivos:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Curso de HTML para empezar</title>
    <style>
      body {
        max-width: 42rem;
        margin: auto;
        padding: 1rem;
        font-family: sans-serif;
        line-height: 1.6;
      }
      .tarjeta {
        padding: 1rem;
        border: 1px solid #526b75;
        border-radius: 0.5rem;
        background: #f2f8f8;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Curso de HTML para empezar</h1>
      <p>Construye tu primera página a tu ritmo.</p>
      <div class="tarjeta">
        <section aria-labelledby="curso-requisitos">
          <h2 id="curso-requisitos">Requisitos</h2>
          <p>Un navegador, un editor y ganas de practicar.</p>
        </section>
        <section aria-labelledby="curso-temario">
          <h2 id="curso-temario">Temario</h2>
          <ol>
            <li>Crear la estructura del documento.</li>
            <li>Escribir párrafos y enlaces.</li>
            <li>Añadir imágenes con texto alternativo.</li>
          </ol>
        </section>
      </div>
    </main>
  </body>
</html>

Verás el título del curso y una tarjeta con dos apartados. Las secciones identifican requisitos y temario; el <div class="tarjeta"> reúne ambos para dibujar un marco. El borde, el fondo y el espacio interior los produce CSS.

Comprueba estas variantes, una por una:

Cambia el texto de «Temario»: también cambia el nombre accesible de su sección porque está vinculado al encabezado.
Sustituye una <section> por <div> y retira su aria-labelledby: conserva el contenido visible, pero deja de identificar esa sección temática y su región nombrada.
Retira solo el <div class="tarjeta"> y su cierre: desaparece el marco; las dos secciones y sus títulos permanecen.
Retira el bloque <style>: desaparece el diseño de tarjeta, pero la jerarquía de encabezados sigue organizando el curso.

Si publicas la ficha como pieza independiente entre varios cursos, un <article> que incluya nombre, introducción y apartados sería más preciso. En ese catálogo, ajusta el título de la ficha y sus apartados a la jerarquía de la página; no cambies solo el nombre del contenedor visual.

Atributos y accesibilidad

<section> no tiene atributos específicos. Puedes usar id para enlazar un apartado, class para aplicar estilos y lang si su contenido está en otro idioma. Cada id debe ser único en el documento.

aria-labelledby es un atributo ARIA que referencia uno o varios IDs para calcular un nombre accesible. En los ejemplos apunta al encabezado. Tener un <h2> dentro no proporciona por sí solo ese nombre al contenedor.

El mapeo de section en HTML-AAM establece el rol region cuando tiene nombre accesible y generic en caso contrario. No añadas role="region" automáticamente: una sección nombrada ya obtiene esa semántica. Reserva regiones nombradas para apartados que ayuden a orientarse; multiplicarlas en cada bloque puede dificultar la navegación. La presentación concreta depende del navegador y de la tecnología de asistencia.

Errores frecuentes

Usarla para cada envoltorio CSS. Si el grupo solo permite aplicar márgenes, columnas o un fondo, usa <div>.
Escribir todos los títulos como h1. Mantén niveles explícitos y nombres que describan el contenido; <section> no repara la jerarquía.
Referenciar un ID inexistente o duplicado. Comprueba que aria-labelledby apunta al encabezado correcto. Si copias la ficha, cambia IDs y referencias juntos.
Esperar un diseño especial. La etiqueta no dibuja una tarjeta. Revisa clases y reglas CSS si faltan bordes o separación.

Compatibilidad y fuentes

<section> tiene soporte en los navegadores actuales de uso habitual. La ficha oficial de MDN y sus datos de compatibilidad permiten revisar el soporte del elemento. Esto no garantiza anuncios idénticos en todos los lectores de pantalla.

Fuentes consultadas el 3 de octubre de 2026: HTML Living Standard: section, WAI-ARIA: aria-labelledby y HTML-AAM: section, además de MDN para explicación y compatibilidad.