Validación HTML: El elemento "header" no debe aparecer como descendiente del elemento "header".

Acerca de este problema HTML

El elemento <header> tiene una restricción específica en su modelo de contenido: no debe contener elementos <header>, <footer>, o <main> como descendientes. Esto significa que no solo los hijos directos, sino cualquier <header> anidado — incluso uno enterrado varios niveles profundo dentro de otros elementos — activará este error de validación.

Esta restricción existe porque cada <header> se supone que debe introducir su contenido de sección circundante (como <article>, <section>, <nav>, o el <body> mismo). Si un <header> contiene otro, se vuelve poco claro qué sección está introduciendo cada header. Esta ambigüedad perjudica la accesibilidad, ya que los lectores de pantalla dependen de estos puntos de referencia para ayudar a los usuarios a navegar por la estructura de la página. Las tecnologías asistivas pueden anunciar headers anidados incorrectamente o confundir a los usuarios sobre dónde comienzan y terminan las secciones.

Un escenario común que desencadena este error es cuando un header de todo el sitio envuelve un componente (como una tarjeta o widget) que tiene su propio <header>. Otro error frecuente es duplicar accidentalmente etiquetas <header> al copiar marcado o trabajar con parciales de plantilla.

Para solucionar este problema, tienes varias opciones:

Mover el <header> interior fuera del exterior completamente.
Colocar el <header> interior dentro de un elemento de sección como <section> o <article> que esté dentro del <header> exterior — aunque esto es inusual y probablemente sea señal de un problema estructural.
Reemplazar el <header> interior con un elemento que no sea punto de referencia como <div> si no representa verdaderamente contenido introductorio para una sección.

Ejemplos

Incorrecto: elementos `<header>` anidados

Este marcado anida un <header> para un artículo destacado directamente dentro del <header> de la página, lo cual es inválido:

<header>
  <h1>Welcome to Our Shop</h1>
  <header>
    <h2>Featured Product</h2>
    <p>Check out our latest arrival!</p>
  </header>
</header>

Correcto: usar un `<div>` para la agrupación interior

Si el contenido interior es simplemente una agrupación visual dentro del mismo header, reemplaza el <header> anidado con un <div>:

<header>
  <h1>Welcome to Our Shop</h1>
  <div>
    <h2>Featured Product</h2>
    <p>Check out our latest arrival!</p>
  </div>
</header>

Correcto: mover el `<header>` interior a su propio elemento de sección

Si el <header> interior verdaderamente introduce una sección distinta de contenido, muévelo a un <article> o <section> fuera del header de la página:

<header>
  <h1>Welcome to Our Shop</h1>
  <nav>
    <ul>
      <li><a href="/toys">Toys</a></li>
      <li><a href="/books">Books</a></li>
      <li><a href="/shoes">Shoes</a></li>
    </ul>
  </nav>
</header>

<article>
  <header>
    <h2>Featured Product</h2>
    <p>Check out our latest arrival!</p>
  </header>
  <p>Product details go here.</p>
</article>

Correcto: caso profundamente anidado con un elemento de sección en el medio

Un <header> puede aparecer dentro de un elemento de sección que está dentro de otro <header>, porque el <header> interior ya no es un descendiente del <header> exterior en términos del modelo de contenido — espera, en realidad sí sigue siendo un descendiente. La especificación dice que el <header> no debe aparecer como descendiente a cualquier profundidad. Así que la única solución válida es asegurar que no exista ningún <header> en ningún lugar dentro de otro <header>:

<!-- Inválido: incluso con un article en el medio, sigue anidado -->

<header>
  <article>
    <header>
      <h2>News</h2>
    </header>
  </article>
</header>

<!-- Válido: mover el article fuera del header -->

<header>
  <h1>My Site</h1>
</header>

<article>
  <header>
    <h2>News</h2>
  </header>
  <p>Article content here.</p>
</article>

La conclusión clave es sencilla: un <header> nunca debe contener otro <header>, independientemente de cuántos elementos se sitúen entre ellos. Reestructura tu HTML para que cada <header> viva en su propio contexto de sección, y tu documento será válido, accesible y semánticamente claro.