Validación HTML: Valor incorrecto para el atributo "href" en el elemento "a": Carácter ilegal en consulta: "|" no está permitido.

Acerca de este problema HTML

El validador HTML del W3C verifica que las URLs utilizadas en atributos como href cumplan con el estándar de URL mantenido por WHATWG. Según este estándar, solo ciertos caracteres están permitidos para aparecer literalmente en el componente de consulta de una URL. El carácter pipe (|, Unicode U+007C) no está en el conjunto de caracteres de consulta permitidos, lo que significa que debe ser codificado como porcentaje como %7C cuando aparece en la cadena de consulta de una URL.

Aunque la mayoría de navegadores modernos manejarán silenciosamente un | sin codificar en una URL y aún así navegarán al destino deseado, confiar en este comportamiento es problemático por varias razones:

Cumplimiento de estándares: Los documentos HTML que contienen caracteres especiales sin codificar en URLs son técnicamente inválidos y fallarán la validación del W3C.
Interoperabilidad: No todos los agentes de usuario, clientes HTTP, web scrapers o servidores proxy manejan los caracteres URL ilegales de la misma manera. Un pipe sin codificar podría ser malinterpretado, eliminado, o causar comportamiento inesperado en ciertos entornos.
Seguridad: Codificar URLs apropiadamente ayuda a prevenir ataques de inyección y asegura que cada parte de la URL sea analizada sin ambigüedades. Los caracteres especiales sin codificar pueden ser explotados en ciertos contextos.
Compartir enlaces y procesamiento: Las URLs a menudo se copian, pegan, incrustan en correos electrónicos, o son procesadas por APIs. Un | sin codificar puede romper la URL cuando pasa a través de sistemas que aplican estrictamente la sintaxis URL.

Este problema comúnmente surge cuando las URLs se construyen manualmente, se extraen de bases de datos, o son generadas por sistemas backend que no codifican automáticamente los parámetros de consulta. También puede aparecer cuando se usan valores delimitados por pipe como valores de parámetros de consulta (ej., ?filter=red|blue|green).

La solución es directa: reemplaza cada | literal en la URL con su equivalente codificado como porcentaje %7C. Si estás generando URLs en código, usa funciones de codificación incorporadas como encodeURIComponent() de JavaScript o urlencode() de PHP para manejar esto automáticamente.

Ejemplos

Incorrecto: carácter pipe sin codificar en cadena de consulta

<a href="https://example.com/search?q=test|demo">Search</a>

El | literal en la cadena de consulta desencadena el error de validación.

Correcto: carácter pipe codificado como porcentaje

<a href="https://example.com/search?q=test%7Cdemo">Search</a>

Reemplazar | con %7C hace que la URL sea válida. El servidor que recibe esta solicitud la decodificará de vuelta a test|demo automáticamente.

Incorrecto: múltiples caracteres pipe como delimitadores

<a href="https://example.com/filter?colors=red|blue|green">Filter colors</a>

Correcto: todos los caracteres pipe codificados

<a href="https://example.com/filter?colors=red%7Cblue%7Cgreen">Filter colors</a>

Generando URLs codificadas en JavaScript

Si estás construyendo URLs dinámicamente, usa encodeURIComponent() para codificar valores individuales de parámetros:

<script>
  const colors = "red|blue|green";
  const url = "https://example.com/filter?colors=" + encodeURIComponent(colors);
  // Resultado: "https://example.com/filter?colors=red%7Cblue%7Cgreen"
</script>

Esto asegura que cualquier carácter especial en el valor — incluyendo |, espacios, ampersands, y otros — sea codificado apropiadamente sin que necesites recordar la forma codificada como porcentaje de cada carácter.

Otros caracteres a vigilar

El carácter pipe no es el único que causa este error de validación. Otros caracteres que deben ser codificados como porcentaje en cadenas de consulta URL incluyen llaves ({ y }), el circunflejo (^), comilla invertida (`), y corchetes ([ y ]) cuando se usan fuera de contextos específicos. Como regla general, siempre codifica valores suministrados por usuario o dinámicos usando la función de codificación URL de tu lenguaje en lugar de construir cadenas de consulta a través de concatenación simple de cadenas.