Validación HTML: Valor incorrecto "" para el atributo "src" en el elemento "iframe": debe estar completo.

Acerca de este problema HTML

El atributo src en un <iframe> le dice al navegador qué documento cargar y mostrar dentro del marco embebido. Cuando dejas este atributo vacío (src=""), el Validador HTML de W3C reporta un error porque la especificación HTML requiere que el valor sea una URL válida y no vacía. Una cadena vacía no resuelve a un recurso válido.

Esto es más que un problema cosmético de validación. Cuando un navegador encuentra src="", típicamente interpreta la cadena vacía como una URL relativa que apunta a la página actual, lo que hace que el navegador vuelva a obtener y embeba el documento actual dentro de sí mismo. Esto lleva a peticiones de red innecesarias, degradación potencial del rendimiento y comportamiento de renderizado inesperado. En algunos casos puede incluso causar bucles de anidamiento infinito o romper la funcionalidad de la página.

Desde el punto de vista de accesibilidad, un <iframe> vacío sin una fuente válida no proporciona contenido significativo a las tecnologías de asistencia. Los lectores de pantalla pueden anunciar el marco sin poder describir su propósito, creando una experiencia confusa para los usuarios.

Cómo solucionarlo

Proporciona una URL válida: Establece el atributo src a la URL real del contenido que quieres embeber.
Usa about:blank para marcos intencionalmente vacíos: Si necesitas un <iframe> en el DOM pero aún no tienes contenido para cargar (por ejemplo, planeas poblarlo más tarde vía JavaScript), usa src="about:blank". Esta es una URL válida que carga una página en blanco sin provocar peticiones extra.
Elimina el elemento: Si el <iframe> no es necesario, elimínalo completamente del marcado. Puedes crearlo e insertarlo dinámicamente con JavaScript cuando tengas contenido para cargar.
Usa srcdoc en su lugar: Si quieres embeber HTML en línea en lugar de cargar una URL externa, usa el atributo srcdoc, que acepta una cadena HTML directamente.

Ejemplos

❌ Atributo `src` vacío

<iframe src=""></iframe>

Esto provoca el error de validación porque el valor de src es una cadena vacía.

❌ Atributo `src` con solo espacios en blanco

<iframe src="  "></iframe>

Los valores que solo contienen espacios en blanco también son URLs inválidas y producirán el mismo error.

✅ URL válida en `src`

<iframe src="https://example.com/map.html" title="Mapa de ubicación"></iframe>

Una URL completamente calificada es la solución más directa. Nota el atributo title, que se recomienda para accesibilidad para que las tecnologías de asistencia puedan describir el propósito del marco.

✅ Usando `about:blank` para un marco de marcador de posición

<iframe src="about:blank" title="Área de contenido dinámico"></iframe>

Este es un enfoque válido cuando necesitas el <iframe> en el DOM pero planeas establecer su contenido más tarde con JavaScript usando contentDocument.write() o actualizando el atributo src dinámicamente.

✅ Usando `srcdoc` para contenido en línea

<iframe srcdoc="<p>¡Hola, mundo embebido!</p>" title="Contenido en línea"></iframe>

El atributo srcdoc te permite embeber HTML directamente sin necesidad de una URL externa. Cuando srcdoc está presente, tiene prioridad sobre src.

✅ Creando dinámicamente el iframe con JavaScript

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

Si la URL de origen no está disponible al cargar la página, crear el <iframe> dinámicamente evita tener un src vacío en tu HTML por completo.