Verificação HTML: Valor inválido para o atributo "href" no elemento "a": Caractere ilegal na query: "|" não é permitido.

Sobre este problema HTML

O W3C HTML Validator verifica que os URLs usados em atributos como href estão em conformidade com o URL Standard mantido pela WHATWG. De acordo com este padrão, apenas determinados caracteres são permitidos para aparecer literalmente no componente de query de um URL. O caractere pipe (|, Unicode U+007C) não está no conjunto de caracteres de query permitidos, o que significa que deve ser codificado em percentagem como %7C quando aparece na string de query de um URL.

Embora a maioria dos browsers modernos trate silenciosamente um | bruto num URL e ainda assim navegue para o destino pretendido, confiar neste comportamento é problemático por várias razões:

Conformidade com padrões: Documentos HTML que contêm caracteres especiais não codificados em URLs são tecnicamente inválidos e falharão a validação W3C.
Interoperabilidade: Nem todos os user agents, clientes HTTP, web scrapers ou servidores proxy tratam caracteres ilegais de URL da mesma forma. Um pipe não codificado pode ser mal interpretado, removido ou causar comportamento inesperado em determinados ambientes.
Segurança: Codificar adequadamente os URLs ajuda a prevenir ataques de injeção e garante que cada parte do URL é analisada sem ambiguidade. Caracteres especiais não codificados podem ser explorados em determinados contextos.
Partilha e processamento de links: Os URLs são frequentemente copiados, colados, incorporados em emails ou processados por APIs. Um | não codificado pode quebrar o URL quando passa por sistemas que aplicam rigorosamente a sintaxe de URL.

Este problema surge comummente quando os URLs são construídos manualmente, retirados de bases de dados ou gerados por sistemas backend que não codificam automaticamente os parâmetros de query. Também pode aparecer ao usar valores delimitados por pipe como valores de parâmetros de query (por exemplo, ?filter=red|blue|green).

A correção é direta: substitua cada | literal no URL pelo seu equivalente codificado em percentagem %7C. Se está a gerar URLs em código, use funções de codificação integradas como encodeURIComponent() do JavaScript ou urlencode() do PHP para tratar isto automaticamente.

Exemplos

Incorreto: caractere pipe bruto na string de query

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

O | literal na string de query desencadeia o erro de validação.

Correto: caractere pipe codificado em percentagem

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

Substituir | por %7C torna o URL válido. O servidor que recebe este pedido descodificá-lo-á automaticamente de volta para test|demo.

Incorreto: múltiplos caracteres pipe como delimitadores

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

Correto: todos os caracteres pipe codificados

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

Gerar URLs codificados em JavaScript

Se está a construir URLs dinamicamente, use encodeURIComponent() para codificar valores individuais 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>

Isto garante que quaisquer caracteres especiais no valor — incluindo |, espaços, ampersands e outros — são adequadamente codificados sem você precisar de se lembrar da forma codificada em percentagem de cada caractere.

Outros caracteres a observar

O caractere pipe não é o único que causa este erro de validação. Outros caracteres que devem ser codificados em percentagem nas strings de query de URL incluem chavetas ({ e }), o circunflexo (^), backtick (`), e parênteses retos ([ e ]) quando usados fora de contextos específicos. Como regra geral, codifique sempre valores fornecidos pelo utilizador ou dinâmicos usando a função de codificação de URL da sua linguagem em vez de construir strings de query através de simples concatenação de strings.