Validación HTML: Encabezado vacío.

Acerca de este problema HTML

Los encabezados desempeñan un papel fundamental en la estructuración de una página web. Crean un esquema del documento en el que tanto los usuarios como las máquinas se basan. Los lectores de pantalla, por ejemplo, permiten a los usuarios navegar por una página saltando entre encabezados, convirtiéndolos en una de las herramientas más importantes para la navegación accesible. Cuando un encabezado está vacío, los lectores de pantalla pueden anunciar “encabezado nivel 2” (o similar) sin texto acompañante, dejando a los usuarios confundidos sobre en qué sección han entrado.

Los encabezados vacíos también señalan un problema estructural. A menudo aparecen cuando los desarrolladores utilizan elementos de encabezado únicamente para espaciado o propósitos de estilo, cuando el contenido debe ser inyectado dinámicamente mediante JavaScript pero el script falla, o cuando los encabezados se dejan como marcadores de posición durante el desarrollo y nunca se rellenan.

El validador de W3C marca esto como una advertencia porque la especificación HTML establece que los encabezados representan el tema de su sección. Un encabezado vacío no puede cumplir este propósito. Aunque es técnicamente HTML analizable, es semánticamente sin significado y degrada la calidad del documento.

Cómo solucionarlo

Añade texto descriptivo al encabezado que represente con precisión el contenido de su sección.
Elimina el encabezado vacío si no tiene ningún propósito. No mantengas encabezados vacíos como espaciadores — usa márgenes o padding de CSS en su lugar.
Si el contenido se carga dinámicamente, considera añadir el elemento de encabezado mediante JavaScript al mismo tiempo que su contenido, en lugar de dejar una carcasa vacía en el marcado.
Si estás ocultando el encabezado visualmente pero aún quieres que esté disponible para lectores de pantalla, usa una técnica CSS visualmente oculta en lugar de dejarlo vacío.

Ejemplos

❌ Encabezados vacíos (desencadena la advertencia)

<h1></h1>

<h2> </h2>

<h3>
</h3>

Los tres se consideran vacíos — incluso los que contienen espacios en blanco o un salto de línea.

❌ Usar un encabezado vacío para espaciado

<h2></h2>
<p>Este párrafo necesita algo de espacio encima.</p>

Esto hace mal uso de un elemento de encabezado para propósitos de diseño visual.

✅ Encabezado con contenido significativo

<h1>Bienvenido a nuestra tienda</h1>

<h2>Productos destacados</h2>
<p>Echa un vistazo a nuestras últimas novedades.</p>

✅ Usar CSS para espaciado en lugar de encabezados vacíos

<p class="section-intro">Este párrafo necesita algo de espacio encima.</p>

.section-intro {
  margin-top: 2rem;
}

✅ Encabezado visualmente oculto para lectores de pantalla

Si necesitas un encabezado que esté disponible para tecnologías de asistencia pero no visible en pantalla, incluye texto y ocúltalo con CSS:

<h2 class="visually-hidden">Menú de navegación</h2>
<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/about">Acerca de</a></li>
  </ul>
</nav>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

✅ Añadir encabezados dinámicamente con su contenido

En lugar de colocar un encabezado vacío en el HTML y rellenarlo después, crea el encabezado junto con su contenido:

<div id="results"></div>

<script>
  const container = document.getElementById("results");
  const heading = document.createElement("h2");
  heading.textContent = "Resultados de búsqueda";
  container.appendChild(heading);
</script>

Este enfoque evita cualquier momento en el que exista un encabezado vacío en el DOM, asegurando validez y accesibilidad en todo momento.