Docs ejecutables de HTML: Section en HTML

Para qué sirve la etiqueta section

<section> agrupa contenido de un mismo tema, y empieza con un encabezado que nombra ese tema. Una landing page dividida en "Features", "Pricing" y "FAQ" es el caso de manual:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

Cada sección es un capítulo de la página, y cada encabezado es una línea del índice de la página. Como las demás etiquetas semánticas, <section> no tiene estilo por defecto; los bordes vienen del CSS.

section vs article vs div

Los tres se ven igual en pantalla. Lo que cambia es lo que dicen del contenido:

Elemento	Significa	Prueba
`<article>`	Una pieza completa e independiente	¿Tendría sentido publicada sola, en otro sitio o en un feed?
`<section>`	Una parte temática de un todo más grande	¿Tiene (o necesita) un encabezado, y es un capítulo de algo?
`<div>`	Nada: una caja de estilo o diseño	¿Está ahí solo para el CSS o el JavaScript?

Las entradas de blog, los comentarios de un foro, las noticias y las tarjetas de producto son articles. "Features", "Capítulo 2" y "Productos relacionados" son sections. Una fila flex que alinea tres tarjetas es un div.

Articles dentro de una section

Los dos se anidan en ambas direcciones. Aquí una sección "Latest posts" contiene varios artículos independientes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

Fíjate en el <div class="grid">: solo existe para colocar las tarjetas en fila, así que un div es la etiqueta correcta. Cada tarjeta es un article porque cada entrada se sostiene por sí sola.

Sections dentro de un article

Un artículo largo se puede dividir en secciones, igual que los capítulos de un libro. Los niveles de encabezado continúan a partir del encabezado del propio artículo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

La caja azul es el artículo (la guía completa), las barras verdes son sus secciones. Dale a una sección su propio nivel de encabezado: un artículo con h2 contiene secciones con h3.

Las sections con nombre se convierten en landmarks

Los lectores de pantalla listan ciertos elementos como landmarks entre los que se puede saltar. Una <section> se convierte en un landmark region solo cuando tiene un nombre accesible. Apunta aria-labelledby a su encabezado:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

Haz esto solo con las pocas secciones a las que un usuario querría saltar directamente, no con todas: una página con veinte landmarks es tan difícil de recorrer como una sin ninguno. Las secciones sin nombre siguen ayudando, porque sus encabezados aparecen en la lista de encabezados del lector de pantalla.

Las secciones también son buenos destinos para los enlaces internos de la página. Dale un id a una y un enlace con href="#id" salta a ella:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

Errores comunes

Usar <section> como envoltorio de estilo. Si no hay encabezado ni tema, usa <div>. La página de HTML semántico muestra dónde encaja cada etiqueta de estructura.
Envolver una sola entrada de blog en <section>. Una entrada que se sostiene por sí sola es un <article>.
Secciones sin encabezados. Añade un encabezado, aunque esté oculto visualmente, o replantéate si es una sección.
Reemplazar <main> por <section>. El contenido principal de la página va en <main>; las secciones van dentro de él.
Dar nombre a todas las secciones. Añade aria-labelledby solo a las importantes, para que la lista de landmarks siga siendo corta.

Preguntas frecuentes

¿Qué es la etiqueta section en HTML?

<section> agrupa contenido que pertenece a un mismo tema, como un capítulo de un documento o la parte de "Precios" de una landing page. Normalmente debe empezar con un encabezado que diga de qué trata la sección.

¿Qué diferencia hay entre section y div?

<section> dice que el contenido es una parte temática del documento con su propio encabezado. <div> no dice nada; es una caja para estilos o diseño. Si solo necesitas un envoltorio para el CSS, usa <div>.

¿Qué diferencia hay entre section y article?

<article> es contenido que tiene sentido por sí solo, fuera de la página: una entrada de blog, un comentario, una tarjeta de producto. <section> es una parte de algo más grande que solo tiene sentido en su contexto. Pregúntate si podrías publicar la pieza sola: si es así, es un article.

¿Un article puede contener sections, y una section contener articles?

Sí, las dos cosas. Un artículo largo se puede dividir en secciones, y una sección como "Últimas entradas" puede contener una lista de articles.

¿Una section necesita un encabezado?

Debería tener uno casi siempre, porque el encabezado es lo que da nombre al tema. Si no se te ocurre un encabezado para ella, probablemente el contenido no es una sección y encaja mejor un <div>.

Conceptos relacionados