Sobre este problema HTML
O atributo href espera um URL válido, e os URLs seguem regras de sintaxe rigorosas definidas pelo RFC 3986. Sob estas regras, os espaços não são permitidos em lugar nenhum de um URL — nem no caminho, na string de consulta, no fragmento, ou em qualquer outro componente. Quando um navegador encontra um espaço num href, pode tentar corrigir o URL codificando o espaço automaticamente, mas este comportamento não é garantido ser consistente em todos os navegadores e contextos. Confiar nos navegadores para corrigir silenciosamente URLs inválidos é frágil e pode levar a links quebrados.
Isto importa por várias razões. Primeiro, conformidade com padrões: o validador W3C sinaliza isto porque a especificação HTML requer que os valores href sejam URLs válidos. Segundo, interoperabilidade: embora a maioria dos navegadores modernos lidem com espaços graciosamente na navegação, outros consumidores do seu HTML — como web crawlers, leitores de ecrã, verificadores de links, e APIs que analisam HTML — podem não conseguir. Terceiro, acessibilidade: as tecnologias assistivas dependem de URLs bem formados para anunciar e seguir links corretamente. Um URL mal formado pode levar a comportamentos inesperados para utilizadores que dependem dessas ferramentas.
A correção é direta: substitua cada carácter de espaço literal por %20. Isto chama-se codificação por percentagem (por vezes chamada codificação de URL). A sequência %20 é a representação hexadecimal do carácter espaço (código ASCII 32). Na parte da string de consulta de um URL especificamente, pode também ver + usado para representar espaços (conforme definido pelo formato application/x-www-form-urlencoded), mas %20 é universalmente válido em todas as partes de um URL e é a escolha mais segura.
Esteja ciente de que os espaços podem por vezes ser difíceis de detetar, especialmente espaços finais ou espaços introduzidos por motores de templates e plataformas CMS que concatenam partes de URL. Se está a gerar URLs dinamicamente (por exemplo, num template do lado do servidor ou JavaScript), use funções de codificação integradas como encodeURIComponent() em JavaScript ou urlencode() em PHP em vez de substituir manualmente os espaços.
Exemplos
Incorreto: espaço na string de consulta
<a href="search.html?q=my search">Search for 'my search'</a>
O espaço literal entre my e search torna isto um URL inválido.
Correto: espaço substituído por %20
<a href="search.html?q=my%20search">Search for 'my search'</a>Incorreto: espaços no caminho
<a href="/files/my document.pdf">Download the document</a>Espaços no segmento de caminho são igualmente inválidos.
Correto: espaços no caminho codificados
<a href="/files/my%20document.pdf">Download the document</a>Incorreto: múltiplos espaços no caminho e consulta
<a href="/product catalog/items?name=red shoes&category=on sale">Red Shoes</a>Correto: todos os espaços codificados
<a href="/product%20catalog/items?name=red%20shoes&category=on%20sale">Red Shoes</a>
Note que além de codificar os espaços, o & na string de consulta deve ser escrito como & em HTML para evitar ser interpretado como o início de uma entidade HTML.
Usar JavaScript para codificar URLs dinamicamente
Se está a construir URLs em JavaScript, use encodeURIComponent() para valores de parâmetros individuais ou encodeURI() para URLs completos:
<script>
const query = "my search";
const url = "search.html?q=" + encodeURIComponent(query);
// Result: "search.html?q=my%20search"
</script>
Esta abordagem previne problemas de codificação ao lidar automaticamente com todos os caracteres especiais — não apenas espaços, mas também caracteres como #, &, =, e outros que têm significado especial em URLs.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.