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

Sobre este problema HTML

O elemento <header> representa conteúdo introdutório para o seu elemento de seccionamento ou raiz de seccionamento ancestral mais próximo. Normalmente contém cabeçalhos, logótipos, navegação e formulários de pesquisa. O elemento <footer> representa um rodapé para o seu elemento de seccionamento ou raiz de seccionamento ancestral mais próximo, normalmente contendo informações como autoria, dados de direitos de autor, ou ligações para documentos relacionados.

A especificação HTML estabelece que <header> não deve conter descendentes <header> ou <footer>. Esta restrição existe porque estes elementos transportam significado semântico específico. Um <footer> aninhado dentro de um <header> cria uma estrutura de documento contraditória — representaria simultaneamente conteúdo introdutório (por estar no cabeçalho) e conteúdo conclusivo/suplementar (por ser um rodapé). Isto confunde tecnologias assistivas como leitores de ecrã, que usam estes elementos de referência para ajudar os utilizadores a navegar na página. Quando um leitor de ecrã encontra um <footer> dentro de um <header>, não consegue transmitir com precisão a estrutura do documento ao utilizador.

Note que esta regra aplica-se independentemente de quão profundamente aninhado está o <footer>. Mesmo que o <footer> esteja dentro de um <div> que está dentro do <header>, ainda viola a especificação porque é um descendente do <header>.

Como corrigir

Mova o <footer> para fora do <header> — Coloque-o como elemento irmão após o <header> fechar.
Substitua <footer> por um elemento não-semântico — Se apenas precisar de um contentor visual dentro do cabeçalho (não semântica real de rodapé), use um <div> ou <p> em vez disso.
Use um elemento de seccionamento como limite — Se realmente precisar de conteúdo semelhante a rodapé dentro da área do cabeçalho, envolva-o num elemento de seccionamento como <section> ou <article>. Como <footer> aplica-se ao seu ancestral de seccionamento mais próximo, colocá-lo dentro de uma <section> dentro do <header> satisfaria tecnicamente a especificação — mas esta abordagem só deve ser usada quando fizer sentido semanticamente.

Exemplos

❌ Incorreto: `<footer>` aninhado dentro de `<header>`

<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>
</header>

❌ Incorreto: `<footer>` profundamente aninhado ainda dentro de `<header>`

<header>
  <h1>My Website</h1>
  <div class="header-bottom">
    <footer>
      <p>Contact us at info@example.com</p>
    </footer>
  </div>
</header>

✅ Correto: `<footer>` movido para fora do `<header>`

<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<footer>
  <p>&copy; 2024 My Website</p>
</footer>

✅ Correto: usar um `<div>` para conteúdo não-semântico dentro do cabeçalho

<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <div class="header-meta">
    <p>Contact us at info@example.com</p>
  </div>
</header>

✅ Correto: `<footer>` dentro de um elemento de seccionamento dentro do cabeçalho

<header>
  <h1>Latest News</h1>
  <article>
    <h2>Featured Story</h2>
    <p>A brief summary of the story...</p>
    <footer>
      <p>By Jane Doe, June 2024</p>
    </footer>
  </article>
</header>

Neste último exemplo, o <footer> é descendente do elemento <article> (um elemento de conteúdo de seccionamento), pelo que atua como rodapé do artigo em vez do <header>. Isto é válido porque a especificação proíbe <footer> como descendente de <header> apenas quando não há elemento de conteúdo de seccionamento intermédio.