Sobre este problema HTML
O Validador HTML W3C verifica se os URLs fornecidos em atributos href estão em conformidade com a especificação de URL. Os parêntesis retos ([ e ]) são caracteres reservados com utilizações muito específicas e limitadas em URLs — são apenas permitidos na parte do host de um URL para denotar endereços IPv6 (por exemplo, http://[::1]/). Quando aparecem noutros locais, como nos dados do esquema, caminho ou string de consulta sem serem codificados em percentagem, o URL é considerado mal formado.
Isto acontece frequentemente em alguns cenários:
-
Links mailto onde alguém envolve um endereço de email em parêntesis, como
mailto:[user@example.com]. -
Variáveis de template que não foram processadas, deixando sintaxe literal de parêntesis (por exemplo,
{{,[,]) no HTML renderizado. -
URLs construídos manualmente onde os parêntesis são erroneamente usados como parte do caminho ou string de consulta em vez de serem codificados em percentagem como
%5Be%5D.
Usar URLs inválidos pode fazer com que os navegadores interpretem mal o destino do link, quebrem a navegação ou causem comportamento inesperado. Tecnologias assistivas como leitores de ecrã também dependem de URLs bem formados para comunicar corretamente os alvos dos links aos utilizadores. Manter os seus URLs em conformidade com os padrões garante comportamento consistente e previsível em todos os navegadores e dispositivos.
Como corrigir
- Remova parêntesis desnecessários. Se os parêntesis não fazem parte dos dados reais (por exemplo, parêntesis decorativos à volta de um endereço de email), simplesmente elimine-os.
-
Codifique parêntesis em percentagem quando fazem parte dos dados. Se você realmente precisa de parêntesis retos no caminho ou string de consulta de um URL, codifique
[como%5Be]como%5D. - Verifique a saída do seu motor de templates. Se usar um sistema de templates, inspeccione o HTML final renderizado num navegador para se certificar de que a sintaxe do template foi totalmente substituída por valores válidos.
Exemplos
Inválido: parêntesis retos num URL mailto
Os parêntesis à volta do endereço de email não são caracteres URL válidos neste contexto.
<a href="mailto:[user@example.com]">Envie-nos Email</a>
Corrigido: remova os parêntesis
<a href="mailto:user@example.com">Envie-nos Email</a>
Inválido: parêntesis retos numa string de consulta
<a href="https://example.com/search?filter[status]=active">Pesquisar</a>
Corrigido: codifique os parêntesis em percentagem
<a href="https://example.com/search?filter%5Bstatus%5D=active">Pesquisar</a>
Inválido: sintaxe de template não processada no HTML renderizado
Se o seu motor de templates falhar em substituir uma variável, o HTML final pode conter caracteres de parêntesis:
<a href="mailto:[% user.email %]">Envie-nos Email</a>
Corrigido: certifique-se de que o template renderiza um URL válido
Certifique-se de que a variável do template é resolvida corretamente. A saída renderizada deve parecer-se com:
<a href="mailto:user@example.com">Envie-nos Email</a>
Na sua fonte de template, isto pode ser escrito como:
<a href="mailto:{{ user.email }}">Envie-nos Email</a>
A chave é que o HTML final entregue ao navegador deve conter um URL válido e sem parêntesis (a menos que os parêntesis sejam adequadamente codificados em percentagem). Valide sempre a sua saída renderizada, não apenas a sua fonte de template, para detetar problemas como este.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.