Verificação HTML: Valor inválido X para o atributo "href" no elemento "a": caráter ilegal no fragmento: "{" não é permitido.

Sobre este problema HTML

URLs seguem uma sintaxe rigorosa definida pela RFC 3986 e o URL Living Standard. Apenas um conjunto específico de caracteres pode aparecer não codificado numa URL. Chaves ({ e }) estão entre os caracteres que ficam fora deste conjunto permitido. Quando o validador W3C encontra um { ou } bruto num valor href, reporta o erro: Valor inválido para o atributo “href” no elemento “a”: caráter ilegal no fragmento.

Esta questão surge comummente em alguns cenários:

Marcadores de posição de template do lado do servidor ou cliente deixados não resolvidos no HTML renderizado (ex., {id}, {{slug}}).
URLs copiados de documentação de API que usam chaves para indicar segmentos variáveis (ex., /users/{userId}/posts).
URLs mal formados ou auto-gerados onde chaves foram incluídas por engano.

Por que isto importa

Conformidade com padrões: A especificação HTML requer que valores href estejam em conformidade com sintaxe de URL válida. Chaves violam este requisito, produzindo HTML inválido.

Inconsistência de navegador: Embora a maioria dos navegadores modernos tente lidar com URLs com caracteres ilegais codificando-os silenciosamente, este comportamento não é garantido em todos os navegadores ou versões. Depender da correção de erro do navegador pode levar a resultados imprevisíveis.

Acessibilidade e interoperabilidade: Tecnologias assistivas, rastreadores web e outras ferramentas que analisam HTML podem não lidar graciosamente com caracteres de URL ilegais. URLs inválidos podem quebrar a extração de links, marcação de páginas e funcionalidade de partilha.

Dificuldade de depuração: Se chaves aparecem no seu HTML renderizado, isso muitas vezes sinaliza que uma variável de template não foi devidamente resolvida, o que pode apontar para um bug mais profundo na lógica da sua aplicação.

Como corrigir

A correção depende do motivo pelo qual as chaves estão lá:

Se as chaves são caracteres literais que devem fazer parte da URL, substitua-as pelos seus equivalentes codificados por percentagem: { torna-se %7B e } torna-se %7D.
Se as chaves são marcadores de posição de template (ex., {userId}), certifique-se de que o seu código do lado do servidor ou cliente os resolve para valores reais antes do HTML ser enviado para o navegador. O HTML renderizado nunca deve conter variáveis de template não resolvidas.
Se as chaves foram incluídas por engano, simplesmente remova-as.

Exemplos

Incorreto: chaves brutas no `href`

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

Isto despoleta o erro de validação porque { e } são caracteres de URL ilegais.

Correto: chaves codificadas por percentagem

Se as chaves são suposto serem partes literais da URL:

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

Correto: variável de template resolvida

Se as chaves eram marcadores de posição de template, certifique-se de que o seu motor de templates os resolve antes de renderizar. O HTML final deve parecer-se com:

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

Incorreto: chaves num identificador de fragmento

<a href="https://example.com/docs#section-{name}">Saltar para Seção</a>

Correto: fragmento codificado por percentagem

<a href="https://example.com/docs#section-%7Bname%7D">Saltar para Seção</a>

Incorreto: chaves em parâmetros de consulta

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

Correto: parâmetro de consulta codificado por percentagem

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

Usando JavaScript para URLs dinâmicos

Se precisar de construir URLs dinamicamente com valores que podem conter caracteres especiais, use encodeURIComponent() em JavaScript em vez de inserir valores brutos em atributos href:

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

Isto garante que quaisquer caracteres especiais, incluindo chaves, são automaticamente codificados por percentagem na URL resultante.