Validación HTML: Valor incorrecto X para el atributo "href" en el elemento "a": Carácter ilegal en el segmento de ruta

Acerca de este problema HTML

Las URLs siguen reglas de sintaxis estrictas definidas por RFC 3986. Solo un conjunto específico de caracteres están permitidos directamente en un segmento de ruta de URL — estos incluyen letras, dígitos, guiones (-), puntos (.), guiones bajos (_) y tildes (~), junto con un puñado de sub-delimitadores como !, $, &, ', (, ), *, +, ,, ; y =. Cualquier carácter fuera de este conjunto — incluyendo espacios, corchetes angulares (< >), llaves ({ }), caracteres de tubería (|), barras invertidas (\), acentos circunflejos (^) y comillas graves (`) — debe codificarse por porcentajes.

La codificación por porcentajes reemplaza el carácter con un signo % seguido de su código ASCII hexadecimal de dos dígitos. Por ejemplo:

Carácter	Codificado por porcentajes
(espacio)	`%20`
`{`	`%7B`
`}`	`%7D`

| | | %7C | | < | %3C | | > | %3E | | ^ | %5E |

Este error de validación importa por varias razones. Primero, los navegadores pueden manejar caracteres ilegales de manera inconsistente — algunos pueden codificarlos silenciosamente, mientras que otros pueden romper el enlace o navegar a un destino inesperado. Segundo, las herramientas que analizan HTML (lectores de pantalla, rastreadores de motores de búsqueda, verificadores de enlaces) dependen de URLs bien formadas y pueden fallar o comportarse de manera impredecible cuando encuentran caracteres ilegales. Tercero, el cumplimiento de estándares asegura que tu HTML funcione de manera confiable en todos los entornos.

Las causas comunes de este error incluyen:

Copiar y pegar URLs de documentos o correos electrónicos que contienen espacios o caracteres especiales sin codificar.
Variables de plantilla o marcadores de posición dejados en los valores href (por ejemplo, {{url}}).
Rutas de archivo con espacios usadas directamente como URLs sin codificación.
Caracteres no-ASCII en URLs que no han sido codificados apropiadamente.

Ejemplos

❌ Espacio en la ruta de la URL

<a href="/my page/about us.html">About Us</a>

✅ Espacios codificados por porcentajes como `%20`

<a href="/my%20page/about%20us.html">About Us</a>

❌ Llaves de un marcador de posición de plantilla dejadas en el marcado

<a href="/products/{{product-id}}/details">View Details</a>

✅ Llaves reemplazadas con un valor real

<a href="/products/42/details">View Details</a>

❌ Carácter de tubería en la ruta

<a href="/search/color|size">Filter Results</a>

✅ Carácter de tubería codificado por porcentajes como `%7C`

<a href="/search/color%7Csize">Filter Results</a>

❌ Corchetes angulares en la URL

<a href="/page/<section>">Go to Section</a>

✅ Corchetes angulares codificados por porcentajes

<a href="/page/%3Csection%3E">Go to Section</a>

Cómo solucionarlo

Identifica el carácter ilegal del mensaje de error del validador — típicamente te dice exactamente cuál carácter es problemático.
Reemplázalo con el equivalente codificado por porcentajes correcto usando la tabla anterior o una herramienta de codificación de URL.
Si la URL contiene sintaxis de plantilla (como {{...}}), asegúrate de que tu motor de plantillas la procese antes de que el HTML se sirva al navegador. La sintaxis de plantilla cruda nunca debería aparecer en el HTML renderizado final.
Considera renombrar archivos y directorios para evitar espacios y caracteres especiales por completo — esta es la solución más limpia a largo plazo.

Si estás generando URLs de manera programática, usa funciones de codificación integradas como encodeURIComponent() de JavaScript o rawurlencode() de PHP para asegurar que todos los caracteres especiales se escapen apropiadamente antes de insertarlos en atributos href.