Acerca de este problema HTML
El atributo href espera una URL válida, y las URLs siguen reglas de sintaxis estrictas definidas por el RFC 3986. Bajo estas reglas, los espacios no están permitidos en ninguna parte de una URL — ni en la ruta, la cadena de consulta, el fragmento, o cualquier otro componente. Cuando un navegador encuentra un espacio en un href, puede intentar corregir la URL codificando el espacio automáticamente, pero no se garantiza que este comportamiento sea consistente en todos los navegadores y contextos. Confiar en que los navegadores corrijan silenciosamente URLs inválidas es frágil y puede llevar a enlaces rotos.
Esto importa por varias razones. Primero, cumplimiento de estándares: el validador de W3C marca esto porque la especificación HTML requiere que los valores href sean URLs válidas. Segundo, interoperabilidad: aunque la mayoría de los navegadores modernos manejan los espacios con gracia al navegar, otros consumidores de tu HTML — como rastreadores web, lectores de pantalla, verificadores de enlaces y APIs que analizan HTML — pueden no hacerlo. Tercero, accesibilidad: las tecnologías de asistencia dependen de URLs bien formadas para anunciar y seguir enlaces correctamente. Una URL malformada podría llevar a un comportamiento inesperado para usuarios que dependen de estas herramientas.
La solución es directa: reemplaza cada carácter de espacio literal con %20. Esto se llama codificación de porcentaje (a veces llamada codificación URL). La secuencia %20 es la representación hexadecimal del carácter espacio (código ASCII 32). En la porción de cadena de consulta de una URL específicamente, también puedes ver + usado para representar espacios (como se define en el formato application/x-www-form-urlencoded), pero %20 es universalmente válido en todas las partes de una URL y es la opción más segura.
Ten en cuenta que los espacios a veces pueden ser difíciles de detectar, especialmente espacios al final o espacios introducidos por motores de plantillas y plataformas CMS que concatenan partes de URL. Si estás generando URLs dinámicamente (ej., en una plantilla del lado del servidor o JavaScript), usa funciones de codificación incorporadas como encodeURIComponent() en JavaScript o urlencode() en PHP en lugar de reemplazar espacios manualmente.
Ejemplos
Incorrecto: espacio en la cadena de consulta
<a href="search.html?q=my search">Search for 'my search'</a>
El espacio literal entre my y search hace que esta sea una URL inválida.
Correcto: espacio reemplazado con %20
<a href="search.html?q=my%20search">Search for 'my search'</a>Incorrecto: espacios en la ruta
<a href="/files/my document.pdf">Download the document</a>Los espacios en el segmento de ruta son igualmente inválidos.
Correcto: espacios en la ruta codificados
<a href="/files/my%20document.pdf">Download the document</a>Incorrecto: múltiples espacios en ruta y consulta
<a href="/product catalog/items?name=red shoes&category=on sale">Red Shoes</a>Correcto: todos los espacios codificados
<a href="/product%20catalog/items?name=red%20shoes&category=on%20sale">Red Shoes</a>
Nota que además de codificar los espacios, el & en la cadena de consulta debe escribirse como & en HTML para evitar ser interpretado como el inicio de una entidad HTML.
Usando JavaScript para codificar URLs dinámicamente
Si estás construyendo URLs en JavaScript, usa encodeURIComponent() para valores de parámetros individuales o encodeURI() para URLs completas:
<script>
const query = "my search";
const url = "search.html?q=" + encodeURIComponent(query);
// Result: "search.html?q=my%20search"
</script>
Este enfoque previene problemas de codificación manejando todos los caracteres especiales automáticamente — no solo espacios, sino también caracteres como #, &, = y otros que tienen un significado especial en las URLs.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.