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

Acerca de este problema HTML

El elemento <footer> representa contenido de pie de página para su elemento de sección ancestro más cercano o el <body>. Típicamente contiene información como avisos de copyright, detalles de contacto, o enlaces a documentos relacionados. El elemento <header>, por otro lado, representa contenido introductorio o un grupo de ayudas de navegación. El estándar HTML establece que <header> no debe aparecer como descendiente de <footer>, porque insertar contenido introductorio dentro de contenido de cierre crea una contradicción semántica.

Es importante señalar que ni <header> ni <footer> son contenido de sección en sí mismos—son contenido de flujo con restricciones de uso específicas. El modelo de contenido del elemento <footer> excluye explícitamente descendientes <header> a cualquier profundidad, lo que significa que no puedes anidar un <header> dentro de un <footer> incluso si hay otros elementos entre ellos.

Esta restricción importa por varias razones:

Semántica y accesibilidad: Los lectores de pantalla y las tecnologías de asistencia dependen del uso correcto de los elementos landmark. Un <header> dentro de un <footer> envía señales contradictorias sobre el propósito de ese contenido, lo que puede confundir a los usuarios que navegan por landmarks.
Cumplimiento de estándares: Violar las reglas del modelo de contenido significa que tu HTML es inválido, lo que puede llevar a comportamientos impredecibles en diferentes navegadores y motores de análisis.
Mantenibilidad: Usar elementos según su propósito previsto hace que tu marcado sea más fácil de entender y mantener para otros desarrolladores.

Ejemplos

❌ Inválido: `<header>` anidado 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>

Esto desencadena el error de validación porque <header> es un hijo directo de <footer>.

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

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

La restricción se aplica a cualquier nivel de anidamiento, no solo a hijos directos. Un <header> en cualquier lugar dentro de un <footer> es inválido.

✅ Válido: `<header>` y `<footer>` como hermanos

Si el contenido es verdaderamente introductorio, pertenece fuera del <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 encabezados directamente dentro de `<footer>`

Si necesitas un encabezado dentro de un footer, usa elementos de encabezado (<h2>, <h3>, etc.) directamente sin envolverlos en un <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 un `<div>` para agrupar dentro de `<footer>`

Si necesitas agrupar contenido visualmente dentro de un footer, usa un <div> en lugar de un <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 un `<article>` dentro de un `<footer>`

Una excepción que vale la pena mencionar: un <header> puede aparecer dentro de un <footer> si pertenece a un nuevo elemento de sección como <article> o <section> anidado dentro de ese footer. En este caso, el <header> es descendiente del <article>, no semánticamente del <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>

Esto es válido porque el <header> sirve como contenido introductorio para el <article>, y los elementos de sección reinician el alcance de las restricciones de <header> y <footer>.