Validación HTML: Valor incorrecto X para el atributo "src" en el elemento "iframe": carácter ilegal en la consulta: no se permite el espacio.

Acerca de este problema HTML

El elemento <iframe> incrusta otro documento HTML dentro de la página actual, y su atributo src especifica la URL del contenido a cargar. Según el URL Living Standard y RFC 3986, las URLs tienen un conjunto estricto de caracteres permitidos. El carácter de espacio (U+0020) no es uno de ellos — siempre debe ser codificado por porcentaje cuando aparece en cualquier parte de una URL.

Cuando el validador HTML de W3C encuentra un espacio literal en la porción de consulta del atributo src de un <iframe>, genera este error porque el navegador tiene que adivinar qué quisiste decir. Aunque la mayoría de los navegadores modernos codificarán silenciosamente el espacio por ti, depender de este comportamiento es problemático por varias razones:

Cumplimiento de estándares: La especificación HTML requiere que el atributo src contenga una URL válida. Una URL con espacios literales no es válida.
Interoperabilidad: Diferentes navegadores, clientes HTTP y servidores intermediarios pueden manejar espacios sin codificar de manera diferente. Algunos podrían truncar la URL en el primer espacio, mientras que otros podrían codificarla. Esta inconsistencia puede llevar a embebidos rotos.
Copiar-pegar y compartir: Si un usuario o script extrae la URL del código fuente HTML, el espacio sin codificar puede causar errores en contextos que no realizan codificación automática.

Para solucionar esto, reemplaza cada espacio literal en la URL con %20. Esta es la codificación por porcentaje estándar para el carácter de espacio. En cadenas de consulta, también puedes usar + como una codificación alternativa para espacios (esto es común en el formato application/x-www-form-urlencoded), aunque %20 es universalmente aceptado en todas las partes de una URL.

Si estás generando URLs de <iframe> dinámicamente con JavaScript, usa la función incorporada encodeURIComponent() para codificar valores individuales de parámetros de consulta, o usa las APIs URL y URLSearchParams, que manejan la codificación automáticamente.

Ejemplos

❌ Inválido: espacios literales en la cadena de consulta

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

El espacio entre 2700 y 6th y entre 6th y Avenue desencadena el error de validación.

✅ Corregido: espacios codificados como `%20`

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

✅ Corregido: espacios codificados como `+` en la cadena de consulta

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

Tanto %20 como + son codificaciones válidas para espacios en cadenas de consulta.

❌ Inválido: espacios en múltiples parámetros de consulta

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

✅ Corregido: todos los espacios correctamente codificados

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

Usar JavaScript para construir URLs codificadas

Si construyes URLs de iframe dinámicamente, deja que el navegador maneje la codificación por ti:

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"

La API URLSearchParams codifica automáticamente espacios (como +), junto con cualquier otro carácter especial, asegurando que la URL resultante siempre sea válida.