Validación HTML: La sección carece de encabezado. Considera usar elementos "h2"-"h6" para añadir encabezados identificativos a todas las secciones.

Acerca de este problema HTML

El elemento <section> define una agrupación temática independiente dentro de un documento — piensa en capítulos, paneles con pestañas, o partes distintas de una página como “Acerca de nosotros” o “Contacto”. Según la especificación HTML, cada <section> debería incluir generalmente un encabezado que identifique su contenido. Cuando una <section> carece de encabezado, el validador emite esta advertencia porque el elemento no se está usando como se pretendía.

Esto importa por varias razones:

Accesibilidad. Los lectores de pantalla y otras tecnologías de asistencia usan los encabezados para construir un esquema de la página. Cuando un usuario navega por secciones, el encabezado es lo que identifica cada una. Una <section> sin encabezado aparece como una “sección sin título” en el esquema del documento, lo que hace difícil o imposible para los usuarios de tecnología de asistencia entender la estructura de la página o saltar al contenido que necesitan.

Semántica. El propósito completo de <section> es agrupar contenido relacionado bajo un tema común, y ese tema debería etiquetarse con un encabezado. Si tu contenido no necesita un encabezado, puede que no sea una verdadera “sección” en el sentido semántico, y un <div> (que no lleva significado semántico) podría ser más apropiado.

Esquema del documento. Los navegadores y herramientas que generan esquemas de documento dependen de los encabezados dentro de elementos de sección. Los encabezados faltantes crean vacíos en el esquema, reduciendo la utilidad de la estructura de la página.

Cómo solucionarlo

Tienes tres opciones principales:

Añadir un encabezado — Coloca un elemento <h2>–<h6> al principio de la <section>. Esta es la solución preferida cuando la sección genuinamente representa un bloque temático de contenido.
Usar aria-label o aria-labelledby — Si un encabezado visible no se adapta a tu diseño, puedes etiquetar la sección para tecnologías de asistencia usando un atributo ARIA. Esto resuelve la preocupación de accesibilidad, aunque el validador puede seguir mostrando la advertencia.
Cambiar a <div> — Si el contenido no representa una sección significativa e identificable del documento, reemplaza <section> con un <div>. No hay expectativa de que un <div> tenga un encabezado.

Ejemplos

❌ Sección sin encabezado

Esto activa la advertencia porque ninguna <section> tiene un encabezado:

<h1>All about guitars</h1>
<section>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
  <p>Analog, digital, portable...</p>
</section>

✅ Solucionado: añadir encabezados a cada sección

<h1>All about guitars</h1>
<section>
  <h2>Guitar types</h2>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
  <h2>Amplifiers</h2>
  <p>Analog, digital, portable...</p>
</section>

✅ Solucionado: usar `aria-label` cuando un encabezado visible no es apropiado

<section aria-label="Guitar types">
  <p>Acoustic, electric, classical... we have them all!</p>
</section>

✅ Solucionado: usar `aria-labelledby` para referenciar un elemento existente

<section aria-labelledby="guitar-heading">
  <span id="guitar-heading" class="visually-hidden">Guitar types</span>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>

✅ Solucionado: reemplazar con `<div>` cuando no se necesita semántica de sección

Si solo usas el elemento como un contenedor de estilo y el contenido no forma un grupo temático distinto, usa un <div> en su lugar:

<h1>All about guitars</h1>
<div class="content-block">
  <p>Acoustic, electric, classical... we have them all!</p>
</div>
<div class="content-block">
  <p>Analog, digital, portable...</p>
</div>

Como regla general, usa <section> cuando tu contenido tenga un tema claro que merezca un encabezado, y usa <div> cuando necesites un contenedor genérico para propósitos de maquetación o estilo.