Acerca de este problema HTML
El atributo poster especifica una imagen a mostrar como marcador de posición mientras el video se está cargando o antes de que el usuario inicie la reproducción. Como todos los atributos HTML que aceptan URLs — tales como src, href, y action — el valor debe cumplir con la sintaxis URI válida como se define en RFC 3986. En este estándar, un carácter de espacio literal no es un carácter legal en ninguna parte de una URL. Cuando el validador encuentra un espacio en el valor del atributo poster, lo marca como un carácter ilegal en el segmento de ruta.
Aunque la mayoría de navegadores modernos son tolerantes e intentarán resolver URLs que contengan espacios sin codificar codificándolos internamente, confiar en este comportamiento es problemático por varias razones:
- Cumplimiento de estándares: La especificación HTML requiere URLs válidas. Los espacios sin codificar violan este requisito.
- Interoperabilidad: No todos los agentes de usuario, clientes HTTP, o sistemas de distribución de contenido manejan espacios sin codificar de la misma manera. Algunos pueden truncar la URL en el primer espacio o fallar al resolver el recurso completamente.
- Portabilidad: Si tu HTML es consumido por herramientas, scrapers, o APIs que analizan URLs estrictamente, los espacios sin codificar pueden causar fallas silenciosas.
- Consistencia: Mantener las URLs correctamente codificadas previene errores sutiles cuando las rutas se construyen dinámicamente en código del lado del servidor o del cliente.
La solución es sencilla. Tienes dos opciones:
-
Codificar por porcentaje los espacios: Reemplaza cada espacio en la URL con
%20. Esto preserva los nombres originales de archivos y carpetas en el servidor mientras produce una URL válida en tu HTML. -
Eliminar espacios de los nombres de archivos y carpetas: Usa guiones (
-), guiones bajos (_), o camelCase en lugar de espacios. Esto generalmente se considera la mejor práctica para recursos web, ya que evita problemas de codificación en general.
Ten en cuenta que esta regla aplica a toda la ruta URL, no solo al nombre del archivo. Si cualquier directorio en la ruta contiene un espacio, también debe ser codificado o renombrado. El mismo principio aplica a otros caracteres especiales que están reservados o no permitidos en URLs, tales como {, }, |, ^, y [.
Ejemplos
Incorrecto — espacio en la ruta
El nombre de carpeta video images contiene un espacio, lo cual es ilegal en un segmento de ruta URL.
<video controls poster="/img/video images/snapshot.png">
<source src="/videos/sample.mp4" type="video/mp4">
</video>Incorrecto — espacio en el nombre del archivo
El nombre de archivo my poster.jpg también desencadena el mismo error.
<video controls poster="/img/my poster.jpg">
<source src="/videos/sample.mp4" type="video/mp4">
</video>Corregido — codificando por porcentaje los espacios
Cada espacio se reemplaza con %20, produciendo una URL válida.
<video controls poster="/img/video%20images/snapshot.png">
<source src="/videos/sample.mp4" type="video/mp4">
</video>Corregido — removiendo espacios de la ruta
Renombrar la carpeta para usar un guión elimina la necesidad de codificación por completo.
<video controls poster="/img/video-images/snapshot.png">
<source src="/videos/sample.mp4" type="video/mp4">
</video>Corregido — removiendo espacios del nombre del archivo
<video controls poster="/img/my-poster.jpg">
<source src="/videos/sample.mp4" type="video/mp4">
</video>
Como una mejor práctica general, evita espacios en todos los nombres de archivos y carpetas usados en la web. Usa guiones o guiones bajos en su lugar. Si estás trabajando con archivos que no puedes renombrar — tales como recursos de un CMS o sistema de terceros — siempre codifica por porcentaje los espacios como %20 en tu HTML. Esto aplica no solo a poster sino a cada atributo que toma un valor URL, incluyendo src, href, action, data, y formaction.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.