Sobre este problema HTML
As URLs usadas em atributos HTML devem seguir o URL Living Standard, que define um conjunto específico de caracteres que são permitidos em cada parte de uma URL. O componente de consulta de uma URL — tudo depois do ? — permite a maioria dos caracteres ASCII imprimíveis, mas certos caracteres ainda são considerados ilegais e devem ser codificados em percentagem. Quando o validador W3C encontra um destes caracteres proibidos no href de um elemento <link>, gera este erro.
Os caracteres comuns que desencadeiam esta questão incluem:
| Caráter | Codificado em percentagem |
|---|
| | (pipe) | %7C |
| [ (parêntese reto esquerdo) | %5B |
| ] (parêntese reto direito) | %5D |
| { (chaveta esquerda) | %7B |
| } (chaveta direita) | %7D |
| ^ (circunflexo) | %5E |
| ` (crase) | %60 |
| (espaço) | %20 |
Porque isto importa
Embora muitos navegadores modernos sejam permissivos e corrijam silenciosamente URLs mal formadas, confiar neste comportamento é arriscado. URLs inválidas podem causar problemas de várias formas:
- Comportamento inconsistente do navegador: Nem todos os agentes de utilizador lidam com caracteres ilegais da mesma forma, o que pode levar a folhas de estilo partidas ou recursos que falham ao carregar.
- Problemas de interoperabilidade: Proxies, CDNs e outros intermediários podem rejeitar ou alterar URLs com caracteres ilegais.
-
Conformidade com padrões: HTML válido requer URLs válidas em atributos. Um caráter ilegal no
hreftorna todo o documento não conforme. - Fiabilidade de copiar-colar e partilha: URLs mal formadas têm mais probabilidade de partir quando partilhadas entre sistemas, emails ou documentação.
Como corrigir
Identifique os caracteres ilegais na string de consulta da sua URL e substitua cada um pelo seu equivalente codificado em percentagem. Se estiver a gerar URLs programaticamente, use uma função de codificação de URL adequada (por exemplo, encodeURIComponent() em JavaScript, urlencode() em PHP, ou urllib.parse.quote() em Python) para garantir que todos os caracteres especiais são codificados corretamente.
Exemplos
❌ Caráter pipe ilegal na string de consulta
Este é um padrão comum visto com URLs do Google Fonts que usam | para separar famílias de tipos de letra:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto">✅ Caráter pipe codificado em percentagem
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%7CRoboto">❌ Parênteses retos na string de consulta
Algumas APIs ou frameworks usam notação de parênteses em parâmetros de consulta:
<link rel="stylesheet" href="https://example.com/styles?themes[]=dark&themes[]=compact">✅ Parênteses retos codificados em percentagem
<link rel="stylesheet" href="https://example.com/styles?themes%5B%5D=dark&themes%5B%5D=compact">❌ Caráter de espaço na string de consulta
<link rel="stylesheet" href="https://example.com/css?file=my styles.css">✅ Caráter de espaço codificado em percentagem
<link rel="stylesheet" href="https://example.com/css?file=my%20styles.css">Note que para o Google Fonts especificamente, a API moderna (v2) usa um formato de URL diferente que evita completamente o caráter pipe. Sempre que possível, considere atualizar para a versão mais recente de uma API em vez de apenas codificar a URL antiga.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.