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

Sobre este problema HTML

O elemento <footer> representa conteúdo de rodapé para o seu elemento de secção ancestral mais próximo ou para o <body>. Tipicamente contém informações como avisos de copyright, detalhes de contacto, ou links para documentos relacionados. O elemento <header>, por outro lado, representa conteúdo introdutório ou um grupo de auxílios de navegação. A norma HTML living standard estabelece que <header> não deve aparecer como descendente de <footer>, porque incorporar conteúdo introdutório dentro de conteúdo de fecho cria uma contradição semântica.

Vale a pena notar que nem <header> nem <footer> são eles próprios conteúdo de secção—são conteúdo de fluxo com restrições específicas de utilização. O modelo de conteúdo do elemento <footer> exclui explicitamente descendentes <header> a qualquer profundidade, o que significa que não pode aninhar um <header> dentro de um <footer> mesmo que existam outros elementos entre eles.

Esta restrição é importante por várias razões:

Semântica e acessibilidade: Leitores de ecrã e tecnologias assistivas dependem da utilização correta de elementos landmark. Um <header> dentro de um <footer> envia sinais conflituosos sobre o propósito desse conteúdo, o que pode confundir utilizadores que navegam por landmarks.
Conformidade com normas: Violar as regras do modelo de conteúdo significa que o seu HTML é inválido, o que pode levar a comportamentos imprevisíveis em diferentes browsers e motores de parsing.
Manutenibilidade: Usar elementos de acordo com o seu propósito pretendido torna a sua marcação mais fácil de compreender e manter por outros programadores.

Exemplos

❌ Inválido: `<header>` aninhado dentro de `<footer>`

<footer>
  <header>
    <h2>Contact Us</h2>
    <nav>
      <a href="/email">Email</a>
      <a href="/phone">Phone</a>
    </nav>
  </header>
  <p>&copy; 2024 Example Corp.</p>
</footer>

Isto desencadeia o erro de validação porque <header> é um filho direto de <footer>.

❌ Inválido: `<header>` profundamente aninhado dentro de `<footer>`

<footer>
  <div class="footer-top">
    <header>
      <h3>Quick Links</h3>
    </header>
  </div>
  <p>&copy; 2024 Example Corp.</p>
</footer>

A restrição aplica-se a qualquer nível de aninhamento, não apenas a filhos diretos. Um <header> em qualquer lugar dentro de um <footer> é inválido.

✅ Válido: `<header>` e `<footer>` como irmãos

Se o conteúdo é verdadeiramente introdutório, pertence fora do <footer>:

<header>
  <h2>Contact Us</h2>
  <nav>
    <a href="/email">Email</a>
    <a href="/phone">Phone</a>
  </nav>
</header>
<footer>
  <p>&copy; 2024 Example Corp.</p>
</footer>

✅ Válido: Usar títulos diretamente dentro de `<footer>`

Se precisar de um título dentro de um footer, use elementos de título (<h2>, <h3>, etc.) diretamente sem os envolver num <header>:

<footer>
  <h2>Contact Us</h2>
  <nav>
    <a href="/email">Email</a>
    <a href="/phone">Phone</a>
  </nav>
  <p>&copy; 2024 Example Corp.</p>
</footer>

✅ Válido: Usar um `<div>` para agrupamento dentro de `<footer>`

Se precisar de agrupar conteúdo visualmente dentro de um footer, use um <div> em vez de um <header>:

<footer>
  <div class="footer-top">
    <h3>Quick Links</h3>
    <nav>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </div>
  <div class="footer-bottom">
    <p>&copy; 2024 Example Corp.</p>
  </div>
</footer>

✅ Válido: `<header>` dentro de um `<article>` dentro de um `<footer>`

Uma exceção que vale a pena mencionar: um <header> pode aparecer dentro de um <footer> se pertencer a um novo elemento de secção como <article> ou <section> aninhado dentro desse footer. Neste caso, o <header> é um descendente do <article>, não semanticamente do <footer>:

<footer>
  <article>
    <header>
      <h3>Latest Blog Post</h3>
    </header>
    <p>A summary of the latest post.</p>
  </article>
  <p>&copy; 2024 Example Corp.</p>
</footer>

Isto é válido porque o <header> serve como conteúdo introdutório para o <article>, e elementos de secção redefinem o âmbito das restrições de <header> e <footer>.