O elemento “iframe” não deve aparecer como descendente do elemento “a”.

O elemento <iframe> incorpora um documento HTML completamente separado dentro da página atual, criando o seu próprio contexto de navegação independente. O elemento <a>, por outro lado, é um elemento interativo projetado para navegar utilizadores para um novo URL ou localização. Quando você aninha um <iframe> dentro de um <a>, os navegadores enfrentam um conflito: interações do utilizador como cliques podem ser destinadas ao conteúdo incorporado dentro do iframe ou ao próprio link. A especificação HTML resolve esta ambiguidade simplesmente não o permitindo.

De acordo com o padrão HTML living do WHATWG, o modelo de conteúdo do elemento <a> não permite conteúdo interativo como descendentes. O elemento <iframe> é categorizado como conteúdo interativo, o que significa que não deve aparecer em lugar nenhum dentro de uma tag <a> — não como filho direto e não aninhado mais profundamente dentro de outros elementos dentro do link.

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

• Acessibilidade: Leitores de ecrã e tecnologias assistivas não podem transmitir de forma fiável o propósito de um link que contém um documento incorporado. Os utilizadores podem não compreender se estão a interagir com o link ou com o iframe.
• Comportamento imprevisível: Diferentes navegadores podem lidar com cliques no iframe-dentro-de-um-link de forma diferente, levando a experiências de utilizador inconsistentes.
• Conformidade com padrões: Violar o modelo de conteúdo torna o seu HTML inválido, o que pode causar renderização e comportamento inesperados.

Para corrigir o problema, reestruture a sua marcação para que o <iframe> e o <a> sejam irmãos ou de outra forma separados. Se o seu objetivo é fornecer um link juntamente com conteúdo incorporado, coloque o link antes ou depois do iframe. Se quiser uma pré-visualização clicável que liga a algum lugar, considere usar uma miniatura de imagem dentro do link em vez de um iframe.

Exemplos

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

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

Isto desencadeia o erro de validação porque o <iframe> é descendente do elemento <a>.

❌ Inválido: <iframe> aninhado mais profundamente dentro de um elemento <a>

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

Mesmo que o <iframe> não seja um filho direto, ainda é descendente do elemento <a>, o que não é permitido.

✅ Válido: Separar os elementos <iframe> e <a>

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

O link e o iframe são irmãos, portanto não há conflito de aninhamento.

✅ Válido: Usar uma imagem como pré-visualização clicável

Se a intenção é criar uma pré-visualização clicável que liga a uma página, use uma imagem miniatura em vez de um iframe:

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

✅ Válido: Envolver num contentor com um link separado

Se precisar tanto de um iframe quanto de um link relacionado exibidos juntos, use um elemento contentor:

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

Note que ao usar <iframe>, é boa prática incluir um atributo title para descrever o conteúdo incorporado para fins de acessibilidade.

Saiba mais:

MDN Reference

MDN - iframe

→