Verificação HTML: Valor inválido X para o atributo "src" no elemento "iframe": Caráter ilegal na query: espaço não é permitido.

Sobre este problema HTML

O elemento <iframe> incorpora outro documento HTML na página atual, e o seu atributo src especifica o URL do conteúdo a carregar. De acordo com a URL Living Standard e RFC 3986, os URLs têm um conjunto rigoroso de caracteres permitidos. O caráter de espaço (U+0020) não é um deles — deve sempre ser codificado em percentagem quando aparece em qualquer parte de um URL.

Quando o Validador HTML do W3C encontra um espaço literal na porção query de um atributo src de um <iframe>, levanta este erro porque o browser tem de adivinhar o que você quis dizer. Embora a maioria dos browsers modernos codifique silenciosamente o espaço para você, confiar neste comportamento é problemático por várias razões:

Conformidade com normas: A especificação HTML exige que o atributo src contenha um URL válido. Um URL com espaços literais não é válido.
Interoperabilidade: Diferentes browsers, clientes HTTP e servidores intermediários podem lidar com espaços não codificados de forma diferente. Alguns podem truncar o URL no primeiro espaço, enquanto outros podem codificá-lo. Esta inconsistência pode levar a embeds quebrados.
Copy-paste e partilha: Se um utilizador ou script extrair o URL do código HTML, o espaço não codificado pode causar erros em contextos que não fazem codificação automática.

Para corrigir isto, substitua cada espaço literal no URL por %20. Esta é a codificação percentual padrão para o caráter de espaço. Nas query strings, também pode usar + como codificação alternativa para espaços (isto é comum no formato application/x-www-form-urlencoded), embora %20 seja universalmente aceite em todas as partes de um URL.

Se estiver a gerar URLs de <iframe> dinamicamente com JavaScript, use a função incorporada encodeURIComponent() para codificar valores individuais de parâmetros de query, ou use as APIs URL e URLSearchParams, que lidam com a codificação automaticamente.

Exemplos

❌ Inválido: espaços literais na query string

<iframe src="https://maps.google.com/maps?q=2700 6th Avenue"></iframe>

O espaço entre 2700 e 6th e entre 6th e Avenue desencadeia o erro de validação.

✅ Corrigido: espaços codificados como `%20`

<iframe src="https://maps.google.com/maps?q=2700%206th%20Avenue"></iframe>

✅ Corrigido: espaços codificados como `+` na query string

<iframe src="https://maps.google.com/maps?q=2700+6th+Avenue"></iframe>

Tanto %20 como + são codificações válidas para espaços nas query strings.

❌ Inválido: espaços em múltiplos parâmetros de query

<iframe
  src="https://example.com/embed?title=My Page&city=New York">
</iframe>

✅ Corrigido: todos os espaços adequadamente codificados

<iframe
  src="https://example.com/embed?title=My%20Page&city=New%20York">
</iframe>

Usar JavaScript para construir URLs codificados

Se construir URLs de iframe dinamicamente, deixe o browser lidar com a codificação por você:

const url = new URL("https://maps.google.com/maps");
url.searchParams.set("q", "2700 6th Avenue");

const iframe = document.createElement("iframe");
iframe.src = url.toString();
// Resultado: "https://maps.google.com/maps?q=2700+6th+Avenue"

A API URLSearchParams codifica automaticamente os espaços (como +), juntamente com quaisquer outros caracteres especiais, garantindo que o URL resultante é sempre válido.