Verificação HTML: Valor incorreto "" para o atributo "src" no elemento "iframe": deve ser não vazio.

Sobre este problema HTML

O atributo src num <iframe> diz ao browser qual documento carregar e apresentar dentro da frame incorporada. Quando deixa este atributo vazio (src=""), o W3C HTML Validator reporta um erro porque a especificação HTML requer que o valor seja um URL válido e não vazio. Uma string vazia não resolve para um recurso significativo.

Isto é mais do que uma questão cosmética de validação. Quando um browser encontra src="", normalmente interpreta a string vazia como um URL relativo que aponta para a página atual, o que faz com que o browser volte a buscar e incorpore o documento atual dentro de si próprio. Isto leva a pedidos de rede desnecessários, potencial degradação do desempenho e comportamento de renderização inesperado. Em alguns casos pode mesmo causar loops de aninhamento infinitos ou quebrar a funcionalidade da página.

Do ponto de vista da acessibilidade, um <iframe> vazio sem fonte válida não fornece conteúdo significativo às tecnologias assistivas. Os leitores de ecrã podem anunciar a frame sem conseguir descrever o seu propósito, criando uma experiência confusa para os utilizadores.

Como corrigir

Forneça um URL válido: Defina o atributo src para o URL real do conteúdo que quer incorporar.
Use about:blank para frames intencionalmente vazias: Se precisar de um <iframe> no DOM mas ainda não tiver conteúdo para carregar (por exemplo, planeia preenchê-lo mais tarde via JavaScript), use src="about:blank". Este é um URL válido que carrega uma página em branco sem desencadear pedidos extra.
Remova o elemento: Se o <iframe> não for necessário, remova-o completamente da marcação. Pode criá-lo e inseri-lo dinamicamente com JavaScript quando tiver conteúdo para carregar.
Use srcdoc em vez disso: Se quiser incorporar HTML inline em vez de carregar um URL externo, use o atributo srcdoc, que aceita uma string HTML diretamente.

Exemplos

❌ Atributo `src` vazio

<iframe src=""></iframe>

Isto desencadeia o erro de validação porque o valor de src é uma string vazia.

❌ Atributo `src` apenas com espaços em branco

<iframe src="  "></iframe>

Valores apenas com espaços em branco também são URLs inválidos e produzirão o mesmo erro.

✅ URL válido em `src`

<iframe src="https://example.com/map.html" title="Mapa de localização"></iframe>

Um URL completamente qualificado é a correção mais direta. Note o atributo title, que é recomendado para acessibilidade para que as tecnologias assistivas possam descrever o propósito da frame.

✅ Usar `about:blank` para uma frame placeholder

<iframe src="about:blank" title="Área de conteúdo dinâmico"></iframe>

Esta é uma abordagem válida quando precisa do <iframe> no DOM mas planeia definir o seu conteúdo mais tarde com JavaScript usando contentDocument.write() ou atualizando o atributo src dinamicamente.

✅ Usar `srcdoc` para conteúdo inline

<iframe srcdoc="<p>Olá, mundo incorporado!</p>" title="Conteúdo inline"></iframe>

O atributo srcdoc permite-lhe incorporar HTML diretamente sem precisar de um URL externo. Quando srcdoc está presente, tem prioridade sobre src.

✅ Criar o iframe dinamicamente com JavaScript

<div id="video-container"></div>
<script>
  const iframe = document.createElement("iframe");
  iframe.src = "https://example.com/video.html";
  iframe.title = "Leitor de vídeo";
  document.getElementById("video-container").appendChild(iframe);
</script>

Se o URL fonte não estiver disponível no carregamento da página, criar o <iframe> dinamicamente evita ter um src vazio no seu HTML.