Valor incorrecto X para el atributo “href” en el elemento “a”: Carácter ilegal en la consulta

El estándar de URL define un conjunto específico de caracteres que pueden aparecer literalmente en la cadena de consulta de una URL. Los caracteres fuera de este conjunto permitido — como |, [, ], {, }, ^, y espacios sin codificar — deben codificarse por porcentaje. La codificación por porcentaje reemplaza el carácter con un signo % seguido de su código ASCII hexadecimal de dos dígitos.

Esto importa por varias razones. Los navegadores pueden manejar caracteres ilegales de manera inconsistente — algunos podrían arreglarlos silenciosamente mientras que otros no, causando enlaces rotos. Los lectores de pantalla y tecnologías asistivas dependen de URLs bien formadas para anunciar correctamente los destinos de los enlaces. Los rastreadores de motores de búsqueda también pueden fallar al seguir URLs con caracteres ilegales, lo que puede perjudicar la capacidad de descubrimiento. Usar URLs correctamente codificadas asegura que tus enlaces funcionen de manera confiable en todos los agentes de usuario y cumplan tanto con las especificaciones de HTML como de URL.

Caracteres comunes que necesitan codificación

Aquí están los caracteres frecuentemente encontrados que desencadenan este error de validación:

Ten en cuenta que caracteres como ?, =, &, y # tienen un significado especial en URLs y están permitidos en sus respectivas posiciones. Por ejemplo, ? inicia la cadena de consulta, & separa parámetros, y = separa claves de valores. Sin embargo, si estos caracteres aparecen como parte del valor de un parámetro (en lugar de como delimitadores), también deben codificarse por porcentaje.

Cómo solucionarlo

1. Identifica el carácter ilegal mencionado en el mensaje de error del validador.
2. Reemplázalo con su equivalente codificado por porcentaje.
3. Si estás generando URLs dinámicamente con un lenguaje del lado del servidor, usa funciones de codificación integradas como encodeURIComponent() en JavaScript, urlencode() en PHP, o urllib.parse.quote() en Python.

Ejemplos

❌ Incorrecto: Carácter pipe sin codificar en cadena de consulta

<a href="https://example.com/search?filter=red|blue">Buscar</a>

✅ Correcto: Carácter pipe codificado por porcentaje como %7C

<a href="https://example.com/search?filter=red%7Cblue">Buscar</a>

❌ Incorrecto: Corchetes sin codificar en cadena de consulta

<a href="https://example.com/api?items[0]=apple&items[1]=banana">Ver elementos</a>

✅ Correcto: Corchetes codificados por porcentaje

<a href="https://example.com/api?items%5B0%5D=apple&items%5B1%5D=banana">Ver elementos</a>

❌ Incorrecto: Espacio sin codificar en cadena de consulta

<a href="https://example.com/search?q=hello world">Buscar</a>

✅ Correcto: Espacio codificado como %20

<a href="https://example.com/search?q=hello%20world">Buscar</a>

Si estás construyendo URLs en JavaScript, usa encodeURIComponent() en valores de parámetros individuales en lugar de codificar toda la URL. Esta función maneja todos los caracteres que necesitan codificación mientras deja intacta la estructura de la URL:

const query = "red|blue";
const url = `https://example.com/search?filter=${encodeURIComponent(query)}`;
// Resultado: "https://example.com/search?filter=red%7Cblue"

Evita usar encodeURI() para este propósito, ya que no codifica caracteres como [, ], o | que son ilegales en cadenas de consulta. Usa siempre encodeURIComponent() para codificar nombres y valores de parámetros de consulta individuales.

Más información:

MDN Reference

HTML a element - href attribute

→

MDN Reference

What is a URL?

→

WHATWG Spec

HTML spec: Links

→