Validación HTML: El elemento "iframe" no debe aparecer como descendiente del elemento "a".

Acerca de este problema HTML

El elemento <iframe> incrusta un documento HTML completamente separado dentro de la página actual, creando su propio contexto de navegación independiente. El elemento <a>, por otro lado, es un elemento interactivo diseñado para llevar a los usuarios a una nueva URL o ubicación. Cuando anidas un <iframe> dentro de un <a>, los navegadores enfrentan un conflicto: las interacciones del usuario como los clics podrían estar destinadas al contenido incrustado dentro del iframe o al enlace mismo. La especificación HTML resuelve esta ambigüedad simplemente prohibiéndolo.

Según el estándar HTML living de WHATWG, el modelo de contenido del elemento <a> no permite contenido interactivo como descendientes. El elemento <iframe> está categorizado como contenido interactivo, lo que significa que no debe aparecer en ningún lugar dentro de una etiqueta <a> — ni como un hijo directo ni anidado más profundamente dentro de otros elementos dentro del enlace.

Esta restricción es importante por varias razones:

Accesibilidad: Los lectores de pantalla y las tecnologías de asistencia no pueden transmitir de manera confiable el propósito de un enlace que contiene un documento incrustado. Los usuarios pueden no entender si están interactuando con el enlace o con el iframe.
Comportamiento impredecible: Diferentes navegadores pueden manejar los clics en el iframe-dentro-de-un-enlace de manera diferente, llevando a experiencias de usuario inconsistentes.
Cumplimiento de estándares: Violar el modelo de contenido hace que tu HTML sea inválido, lo que puede causar renderizado y comportamiento inesperados.

Para solucionar el problema, reestructura tu marcado de modo que el <iframe> y el <a> sean hermanos o estén separados de otra manera. Si tu objetivo es proporcionar un enlace junto con contenido incrustado, coloca el enlace antes o después del iframe. Si quieres una vista previa clickeable que enlace a algún lugar, considera usar una imagen miniatura dentro del enlace en lugar de un iframe.

Ejemplos

❌ Inválido: `<iframe>` dentro de un elemento `<a>`

<a href="https://example.com">
  <iframe src="https://example.com/embed"></iframe>
</a>

Esto desencadena el error de validación porque el <iframe> es un descendiente del elemento <a>.

❌ Inválido: `<iframe>` anidado más profundamente dentro de un elemento `<a>`

<a href="https://example.com">
  <div>
    <iframe src="https://example.com/embed"></iframe>
  </div>
</a>

Aunque el <iframe> no es un hijo directo, sigue siendo un descendiente del elemento <a>, lo cual no está permitido.

✅ Válido: separa los elementos `<iframe>` y `<a>`

<a href="https://example.com">Visit Example.com</a>
<iframe src="https://example.com/embed"></iframe>

El enlace y el iframe son hermanos, por lo que no hay conflicto de anidamiento.

✅ Válido: usa una imagen como vista previa clickeable en su lugar

Si la intención es crear una vista previa clickeable que enlace a una página, usa una imagen miniatura en lugar de un iframe:

<a href="https://example.com">
  <img src="preview-thumbnail.jpg" alt="Preview of Example.com">
</a>

✅ Válido: envuelve en un contenedor con un enlace separado

Si necesitas tanto un iframe como un enlace relacionado mostrados juntos, usa un elemento contenedor:

<div class="embed-container">
  <iframe src="https://example.com/embed" title="Embedded content from Example.com"></iframe>
  <p><a href="https://example.com">Open Example.com in a new page</a></p>
</div>

Ten en cuenta que al usar <iframe>, es una buena práctica incluir un atributo title para describir el contenido incrustado con fines de accesibilidad.