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

Sobre este problema HTML

A parte do fragmento de um URL (tudo após o símbolo #) segue as mesmas regras de codificação que o resto do URL — caracteres de espaço literais não são permitidos. Quando um navegador encontra um espaço num fragmento de URL, pode tentar corrigi-lo automaticamente, mas este comportamento não é garantido em todos os navegadores e contextos. Depender da correção automática de erros do navegador leva a links frágeis que podem falhar de forma imprevisível.

Esta questão importa por várias razões. Primeiro, produz HTML inválido que falha a validação W3C. Segundo, a navegação por fragmento (saltar para uma secção específica de uma página) pode não funcionar corretamente se o navegador não corrigir automaticamente o espaço. Terceiro, tecnologias assistivas como leitores de ecrã dependem de URLs bem formados para anunciar destinos de links com precisão. Finalmente, ferramentas que analisam ou processam HTML programaticamente — como crawlers, verificadores de links e sistemas de gestão de conteúdo — podem interpretar mal ou rejeitar URLs malformados.

O cenário mais comum para este erro é criar um link para um atributo id na mesma página ou noutra página onde o id contém espaços. No entanto, vale a pena notar que os próprios valores id não podem conter espaços em HTML válido (um espaço num id tornaria-o múltiplos tokens inválidos). Então, se você está a escrever tanto o link como o destino, a melhor correção é frequentemente corrigir o próprio id usando hífens ou underscores em vez de espaços.

Como corrigir

Existem duas abordagens principais:

Codificar os espaços em percentagem — Substituir cada espaço por %20 no valor href.
Usar identificadores sem espaços — Alterar o id de destino para usar hífens ou camelCase, depois atualizar o fragmento para corresponder.

A segunda abordagem é fortemente preferida porque corrige o problema raiz e produz markup mais limpo e legível.

Exemplos

❌ Inválido: Espaço no fragmento

<a href="https://example.com/page#some term">Ir para a secção</a>

<a href="#my section">Saltar para a Minha Secção</a>

✅ Corrigido: Codificar o espaço em percentagem

Se não conseguir controlar o id de destino (p. ex., criar um link para uma página externa), codifique o espaço em percentagem:

<a href="https://example.com/page#some%20term">Ir para a secção</a>

✅ Melhor correção: Usar um `id` com hífen e fragmento correspondente

Quando controlar tanto o link como o destino, use um id sem espaços:

<h2 id="my-section">A Minha Secção</h2>
<p>Algum conteúdo aqui.</p>

<a href="#my-section">Saltar para a Minha Secção</a>

❌ Inválido: Espaço no fragmento criando link para outra página

<a href="/docs/getting-started#quick start guide">Guia de Início Rápido</a>

✅ Corrigido: `id` com hífen correspondente

<!-- Na página de destino (/docs/getting-started): -->

<h2 id="quick-start-guide">Guia de Início Rápido</h2>

<!-- Na página com o link: -->

<a href="/docs/getting-started#quick-start-guide">Guia de Início Rápido</a>

Uma nota sobre convenções de nomenclatura de `id`

Visto que os identificadores de fragmento fazem referência a atributos id, adotar uma convenção consistente de nomenclatura de id evita esta questão completamente. Padrões comuns incluem:

<!-- Hífens (mais comum, usado por muitos geradores de sites estáticos) -->

<section id="getting-started">

<!-- camelCase -->

<section id="gettingStarted">

<!-- Underscores -->

<section id="getting_started">

Todos os três são válidos e nunca irão acionar um erro de validação relacionado com espaços nos seus links de fragmento.