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

Acerca de este problema HTML

El elemento <header> representa contenido introductorio para su elemento ancestro de contenido seccional o raíz seccional más cercano. Típicamente contiene encabezados, logotipos, navegación y formularios de búsqueda. El elemento <footer> representa un pie de página para su elemento ancestro de contenido seccional o raíz seccional más cercano, conteniendo típicamente información como autoría, datos de copyright, o enlaces a documentos relacionados.

La especificación HTML establece que <header> no debe contener descendientes <header> o <footer>. Esta restricción existe porque estos elementos tienen un significado semántico específico. Un <footer> anidado dentro de un <header> crea una estructura de documento contradictoria — representaría simultáneamente contenido introductorio (por estar en el header) y contenido de cierre/suplementario (por ser un footer). Esto confunde a las tecnologías asistivas como los lectores de pantalla, que usan estos elementos landmark para ayudar a los usuarios a navegar por la página. Cuando un lector de pantalla encuentra un <footer> dentro de un <header>, no puede transmitir con precisión la estructura del documento al usuario.

Ten en cuenta que esta regla se aplica independientemente de cuán profundamente anidado esté el <footer>. Incluso si el <footer> está dentro de un <div> que está dentro del <header>, todavía viola la especificación porque es un descendiente del <header>.

Cómo solucionarlo

Mueve el <footer> fuera del <header> — Colócalo como elemento hermano después de que se cierre el <header>.
Reemplaza <footer> con un elemento no semántico — Si solo necesitas un contenedor visual dentro del header (no semántica real de footer), usa un <div> o <p> en su lugar.
Usa un elemento de sección como límite — Si genuinamente necesitas contenido similar a un footer dentro del área del header, envuélvelo en un elemento de sección como <section> o <article>. Porque <footer> se aplica a su ancestro de sección más cercano, colocarlo dentro de una <section> dentro del <header> técnicamente satisfaría la especificación — pero este enfoque solo debería usarse cuando tenga sentido semántico.

Ejemplos

❌ Incorrecto: `<footer>` anidado 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>

❌ Incorrecto: `<footer>` profundamente anidado pero aún dentro de `<header>`

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

✅ Correcto: `<footer>` movido fuera de `<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>

✅ Correcto: usando un `<div>` para contenido no semántico dentro del header

<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>

✅ Correcto: `<footer>` dentro de un elemento de sección dentro del header

<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>

En este último ejemplo, el <footer> es descendiente del elemento <article> (un elemento de contenido seccional), por lo que actúa como el footer del artículo en lugar del <header>. Esto es válido porque la especificación prohíbe <footer> como descendiente de <header> solo cuando no hay un elemento de contenido seccional intermedio.