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

Acerca de este problema HTML

Las URLs siguen una sintaxis estricta definida por RFC 3986 y el URL Living Standard. Solo un conjunto específico de caracteres pueden aparecer sin codificar en una URL. Las llaves ({ y }) están entre los caracteres que caen fuera de este conjunto permitido. Cuando el validador del W3C encuentra un { o } sin procesar en un valor href, reporta el error: Valor incorrecto para el atributo “href” en el elemento “a”: Carácter ilegal en el fragmento.

Este problema surge comúnmente en algunos escenarios:

Marcadores de posición de plantilla del lado del servidor o cliente que quedan sin resolver en el HTML renderizado (ej., {id}, {{slug}}).
URLs copiadas de documentación de API que usan llaves para indicar segmentos variables (ej., /users/{userId}/posts).
URLs malformadas o generadas automáticamente donde las llaves fueron incluidas por error.

Por qué esto importa

Cumplimiento de estándares: La especificación HTML requiere que los valores href cumplan con la sintaxis válida de URL. Las llaves violan este requisito, produciendo HTML inválido.

Inconsistencia del navegador: Aunque la mayoría de los navegadores modernos intentarán manejar URLs con caracteres ilegales codificándolos silenciosamente, este comportamiento no está garantizado en todos los navegadores o versiones. Depender de la corrección de errores del navegador puede llevar a resultados impredecibles.

Accesibilidad e interoperabilidad: Las tecnologías de asistencia, rastreadores web y otras herramientas que analizan HTML pueden no manejar caracteres ilegales de URL de manera elegante. Las URLs inválidas pueden romper la extracción de enlaces, marcadores y funcionalidad para compartir.

Dificultad de depuración: Si las llaves aparecen en tu HTML renderizado, a menudo señala que una variable de plantilla no fue resuelta apropiadamente, lo que puede apuntar a un error más profundo en la lógica de tu aplicación.

Cómo solucionarlo

La solución depende de por qué están ahí las llaves:

Si las llaves son caracteres literales que deberían ser parte de la URL, reemplázalas con sus equivalentes codificados por porcentaje: { se convierte en %7B y } se convierte en %7D.
Si las llaves son marcadores de posición de plantilla (ej., {userId}), asegúrate de que tu código del lado del servidor o cliente las resuelva a valores reales antes de que el HTML se envíe al navegador. El HTML renderizado nunca debería contener variables de plantilla sin resolver.
Si las llaves fueron incluidas por error, simplemente elimínalas.

Ejemplos

Incorrecto: llaves sin procesar en `href`

<a href="https://example.com/api/users/{userId}/profile">Ver Perfil</a>

Esto dispara el error de validación porque { y } son caracteres ilegales de URL.

Correcto: llaves codificadas por porcentaje

Si las llaves están destinadas a ser partes literales de la URL:

<a href="https://example.com/api/users/%7BuserId%7D/profile">Ver Perfil</a>

Correcto: variable de plantilla resuelta

Si las llaves eran marcadores de posición de plantilla, asegúrate de que tu motor de plantillas las resuelva antes del renderizado. El HTML final debería verse así:

<a href="https://example.com/api/users/42/profile">Ver Perfil</a>

Incorrecto: llaves en un identificador de fragmento

<a href="https://example.com/docs#section-{name}">Saltar a Sección</a>

Correcto: fragmento codificado por porcentaje

<a href="https://example.com/docs#section-%7Bname%7D">Saltar a Sección</a>

Incorrecto: llaves en parámetros de consulta

<a href="https://example.com/search?filter={active}">Elementos Activos</a>

Correcto: parámetro de consulta codificado por porcentaje

<a href="https://example.com/search?filter=%7Bactive%7D">Elementos Activos</a>

Usando JavaScript para URLs dinámicas

Si necesitas construir URLs dinámicamente con valores que podrían contener caracteres especiales, usa encodeURIComponent() en JavaScript en lugar de insertar valores sin procesar en atributos href:

<a id="dynamic-link" href="https://example.com">Enlace Dinámico</a>
<script>
  var value = "{some-value}";
  var link = document.getElementById("dynamic-link");
  link.href = "https://example.com/path?param=" + encodeURIComponent(value);
</script>

Esto asegura que cualquier carácter especial, incluyendo llaves, se codifique automáticamente por porcentaje en la URL resultante.