Acerca de este problema HTML
Las URLs siguen reglas de sintaxis estrictas definidas por RFC 3986, que no permite caracteres de espacio literales en ninguna parte del URI — incluyendo segmentos de ruta, cadenas de consulta e identificadores de fragmento. Cuando el W3C HTML Validator encuentra un espacio en el atributo src de un elemento <script>, lo marca como un carácter ilegal porque el valor del atributo no es una URL válida.
Aunque la mayoría de navegadores modernos solucionarán esto silenciosamente codificando el espacio antes de realizar la petición, depender de este comportamiento es problemático por varias razones:
-
Cumplimiento de estándares: La especificación HTML requiere que el atributo
srccontenga una URL válida. Una URL con un espacio literal está técnicamente malformada. - Confiabilidad entre navegadores: No todos los agentes de usuario, proxies o CDNs manejan URLs malformadas de la misma manera. Lo que funciona en un navegador puede fallar en otro contexto.
- Interoperabilidad: Otras herramientas que consumen tu HTML — como linters, crawlers, lectores de pantalla y pipelines de construcción — pueden no ser tan tolerantes como los navegadores.
- Problemas de copiado-pegado y enlaces: Los espacios literales en URLs causan problemas cuando los usuarios copian enlaces o cuando las URLs aparecen en contextos de texto plano como emails, donde el espacio puede romper la URL en dos.
Cómo solucionarlo
Tienes tres opciones, listadas de más recomendada a menos:
- Renombrar el archivo o directorio para eliminar espacios completamente (ej., usar guiones o guiones bajos). Esta es la solución más limpia.
-
Codificar el espacio como porcentaje como
%20en el valor del atributosrc. - Usar una herramienta de construcción o bundler que genere referencias con rutas codificadas apropiadamente o sin espacios automáticamente.
Evita usar + como reemplazo de espacio en segmentos de ruta. El carácter + representa un espacio solo en cadenas de consulta application/x-www-form-urlencoded, no en segmentos de ruta de URL.
Ejemplos
❌ Inválido: espacio en el segmento de ruta
<script src="https://example.com/media assets/app.js"></script>
El espacio entre media y assets hace que esta sea una URL inválida.
✅ Solucionado: codificar el espacio como porcentaje
<script src="https://example.com/media%20assets/app.js"></script>
Reemplazar el espacio con %20 produce una URL válida y que cumple con los estándares.
✅ Mejor: renombrar para evitar espacios completamente
<script src="https://example.com/media-assets/app.js"></script>
Usar un guión (o guión bajo) en lugar de un espacio es el enfoque preferido. Mantiene las URLs limpias, legibles y libres de problemas de codificación.
❌ Inválido: espacio en una ruta relativa local
Este problema no se limita a URLs absolutas. Las rutas relativas desencadenan el mismo error:
<script src="js/my script.js"></script>
✅ Solucionado: codificar o renombrar el archivo local
<script src="js/my%20script.js"></script>
O, mejor aún:
<script src="js/my-script.js"></script>
Múltiples espacios y otros caracteres especiales
Si una URL contiene múltiples espacios u otros caracteres especiales, cada uno debe codificarse individualmente. Por ejemplo, { se convierte en %7B y } se convierte en %7D. Una referencia rápida para caracteres comunes:
| Carácter | Forma codificada |
|---|---|
| Espacio |
%20 |
[ |
%5B |
] |
%5D |
{ |
%7B |
} |
%7D |
<!-- Inválido -->
<script src="libs/my library [v2].js"></script>
<!-- Válido -->
<script src="libs/my%20library%20%5Bv2%5D.js"></script>
<!-- Mejor: renombrar el archivo -->
<script src="libs/my-library-v2.js"></script>
Ten en cuenta que esta misma regla se aplica al atributo src en otros elementos como <img>, <iframe>, <audio> y <video>, así como al atributo href en <a> y <link>. Cada vez que hagas referencia a una URL en HTML, asegúrate de que no contenga espacios literales.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: