Verificação HTML: O elemento "header" não deve aparecer como descendente do elemento "header".

Sobre este problema HTML

O elemento <header> tem uma restrição específica de modelo de conteúdo: não deve conter elementos <header>, <footer> ou <main> como descendentes. Isto significa que não só os filhos diretos, mas qualquer <header> aninhado — mesmo um enterrado vários níveis dentro de outros elementos — irá despoletar este erro de validação.

Esta restrição existe porque cada <header> supostamente deve introduzir o seu conteúdo seccional envolvente (como <article>, <section>, <nav> ou o próprio <body>). Se um <header> contém outro, torna-se pouco claro que secção cada cabeçalho está a introduzir. Esta ambiguidade prejudica a acessibilidade, pois os leitores de ecrã dependem destes marcos para ajudar os utilizadores a navegar na estrutura da página. As tecnologias assistivas podem anunciar cabeçalhos aninhados incorretamente ou confundir os utilizadores sobre onde as secções começam e terminam.

Um cenário comum que despoletra este erro é quando um cabeçalho de site envolve um componente (como um cartão ou widget) que tem o seu próprio <header>. Outro erro frequente é duplicar acidentalmente tags <header> ao copiar marcação ou trabalhar com parciais de template.

Para corrigir este problema, você tem algumas opções:

Mover o <header> interno para fora do externo completamente.
Colocar o <header> interno dentro de um elemento seccional como <section> ou <article> que esteja ele próprio dentro do <header> externo — embora isto seja invulgar e provavelmente um sinal de um problema estrutural.
Substituir o <header> interno por um elemento não-marco como <div> se não representa verdadeiramente conteúdo introdutório para uma secção.

Exemplos

Incorreto: elementos `<header>` aninhados

Esta marcação aninha um <header> para um artigo em destaque diretamente dentro do <header> da página, o que é inválido:

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

Correto: usar um `<div>` para o agrupamento interno

Se o conteúdo interno é simplesmente um agrupamento visual dentro do mesmo cabeçalho, substitua o <header> aninhado por um <div>:

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

Correto: mover o `<header>` interno para o seu próprio elemento seccional

Se o <header> interno verdadeiramente introduz uma secção distinta de conteúdo, mova-o para um <article> ou <section> fora do cabeçalho da 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>

Correto: caso profundamente aninhado com um elemento seccional no meio

Um <header> pode aparecer dentro de um elemento seccional que está ele próprio dentro de outro <header>, porque o <header> interno já não é um descendente do <header> externo em termos do modelo de conteúdo — espere, na verdade ainda é um descendente. A especificação diz que o <header> não deve aparecer como descendente a qualquer profundidade. Então a única correção válida é garantir que nenhum <header> existe em qualquer lugar dentro de outro <header>:

<!-- Inválido: mesmo com um article no meio, ainda está aninhado -->

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

<!-- Válido: mover o article para fora do header -->

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

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

A conclusão principal é simples: um <header> nunca deve conter outro <header>, independentemente de quantos elementos estejam entre eles. Reestruture o seu HTML para que cada <header> viva no seu próprio contexto seccional, e o seu documento será válido, acessível e semanticamente claro.