Validación HTML: Un encabezado no puede ser hijo de otro encabezado.

Acerca de este problema HTML

Según la especificación HTML, los elementos de encabezado (h1–h6) tienen un modelo de contenido de “contenido de fraseo”, lo que significa que solo pueden contener elementos de nivel inline como span, strong, em, a, y nodos de texto. Otros elementos de encabezado no son contenido de fraseo — son contenido de flujo — por lo que colocar un encabezado dentro de otro es HTML inválido.

Esto importa por varias razones. Los lectores de pantalla y otras tecnologías de asistencia dependen de una jerarquía de encabezados bien formada para ayudar a los usuarios a navegar por una página. Cuando los encabezados están anidados uno dentro de otro, el esquema del documento se vuelve roto y confuso, haciendo más difícil para los usuarios entender la estructura del contenido. Los navegadores también pueden intentar “arreglar” el marcado inválido cerrando automáticamente el encabezado externo antes de comenzar el interno, lo que puede producir renderizado inesperado y estructuras DOM que difieren de lo que pretendías.

Hay dos causas comunes de este error:

Anidar intencionalmente encabezados para estilo. Los desarrolladores a veces anidan un h2 dentro de un h1 esperando crear un patrón visual de “encabezado principal + subtítulo”. Esto es inválido. En su lugar, usa elementos de encabezado separados o usa un elemento span o p para el subtítulo.
Una etiqueta de cierre faltante o malformada. Si accidentalmente escribes <h3> en lugar de </h3> para una etiqueta de cierre, el navegador ve dos etiquetas de apertura h3 seguidas. El primer encabezado nunca se cierra correctamente, y el segundo encabezado parece estar anidado dentro de él.

Ejemplos

❌ Encabezado anidado dentro de otro encabezado

<h1>Main heading
  <h2>Sub heading</h2>
</h1>

El h2 es hijo del h1, lo cual no está permitido. Para crear un encabezado con un subtítulo, usa elementos separados:

✅ Encabezados como hermanos

<h1>Main heading</h1>
<h2>Sub heading</h2>

O, si el subtítulo debe ser parte de una estructura de documento seccionada:

<main>
  <h1>Main heading</h1>
  <section>
    <h2>Section heading</h2>
    <p>Paragraph content</p>
  </section>
</main>

❌ La barra diagonal faltante en el cierre causa anidamiento

Un error tipográfico muy común es olvidar la / en la etiqueta de cierre:

<h3>Meet the Feebles<h3>
<h3>Bad Taste<h3>

Aquí, <h3>Meet the Feebles<h3> abre un segundo h3 en lugar de cerrar el primero. El validador ve el segundo h3 como hijo del primero. El mismo problema se propaga a los encabezados subsiguientes.

✅ Etiquetas de encabezado cerradas correctamente

<h3>Meet the Feebles</h3>
<h3>Bad Taste</h3>

❌ Usar encabezados anidados para jerarquía visual dentro de un encabezado

<h1>
  Our Company
  <h3>Established 1999</h3>
</h1>

✅ Usar un `span` para texto suplementario dentro de un encabezado

<h1>
  Our Company
  <span class="subtitle">Established 1999</span>
</h1>

Entonces puedes dar estilo a la clase .subtitle con CSS para lograr la apariencia visual deseada — por ejemplo, mostrándola en una nueva línea con un tamaño de fuente menor:

.subtitle {
  display: block;
  font-size: 0.5em;
  font-weight: normal;
}

✅ Usar el elemento `hgroup`

El elemento hgroup está específicamente diseñado para agrupar un encabezado con contenido relacionado como subtítulos:

<hgroup>
  <h1>Our Company</h1>
  <p>Established 1999</p>
</hgroup>

Esto mantiene la jerarquía de encabezados limpia mientras asocia semánticamente el subtítulo con el encabezado. El elemento hgroup está soportado en el estándar HTML vigente actual y funciona bien con las tecnologías de asistencia.