Verificação HTML: Valor inválido X para o atributo "href" no elemento "a": Barra invertida ("") usada como delimitador de segmento de caminho.

Sobre este problema HTML

O atributo href num elemento <a> deve conter uma URL válida conforme definido pelo Padrão URL do WHATWG. De acordo com este padrão, a barra normal (/) é o único delimitador de segmento de caminho reconhecido. As barras invertidas (\) não têm um papel definido na sintaxe de caminho de URL e são tratadas como caracteres inválidos pelo validador.

Este problema ocorre mais comumente quando os programadores copiam caminhos de ficheiros do Windows, que usa barras invertidas como separador de caminho nativo, diretamente para HTML. Por exemplo, copiar um caminho como images\photos\sunset.jpg do Explorador do Windows e colá-lo num atributo href irá desencadear este erro de validação.

Embora a maioria dos navegadores modernos normalize silenciosamente as barras invertidas para barras normais, depender deste comportamento é problemático por várias razões:

Conformidade com padrões: O seu HTML falha na validação, o que pode mascarar outros problemas reais no seu código.
Interoperabilidade: Nem todos os clientes HTTP, crawlers ou ferramentas normalizam barras invertidas. Bots de motores de busca, verificadores de links ou navegadores mais antigos podem falhar ao seguir a ligação corretamente.
Portabilidade: Código que depende de correção automática do navegador é frágil e pode falhar em ambientes inesperados, como renderização do lado do servidor, clientes de email ou visualizações web incorporadas.
Acessibilidade: Leitores de ecrã e tecnologias assistivas que analisam valores href podem não lidar com barras invertidas de forma consistente, potencialmente quebrando a navegação para utilizadores que dependem destas ferramentas.

Para corrigir o problema, simplesmente substitua cada barra invertida (\) por uma barra normal (/) em qualquer URL usada num atributo href. Isto aplica-se não apenas a elementos <a> mas a qualquer atributo que espere uma URL, como src, action ou data.

Exemplos

Incorreto: barra invertida usada como delimitador de caminho

<a href="docs\guide\intro.html">Introdução</a>

Correto: barra normal usada como delimitador de caminho

<a href="docs/guide/intro.html">Introdução</a>

Incorreto: barras invertidas numa URL absoluta

<a href="https://example.com\blog\2024\post.html">Ler o post</a>

Correto: barras normais numa URL absoluta

<a href="https://example.com/blog/2024/post.html">Ler o post</a>

Incorreto: barras mistas

Às vezes uma URL contém uma mistura de barras normais e invertidas, o que ainda desencadeia o erro:

<a href="assets/images\photo.jpg">Ver foto</a>

Correto: todas as barras normais

<a href="assets/images/photo.jpg">Ver foto</a>

Dicas para evitar este problema

Procurar e substituir: Se está a migrar conteúdo ou a trabalhar com caminhos gerados no Windows, faça uma procura e substituição global de \ por / nos seus ficheiros HTML.
Configurações do editor: Muitos editores de código podem destacar ou corrigir automaticamente caracteres de URL inválidos. Ative ferramentas de linting ou plugins de validação HTML para detetar isto cedo.
Ferramentas de build: Se o seu processo de build gera ligações a partir de caminhos do sistema de ficheiros, certifique-se de que normaliza os separadores de caminho para barras normais antes de os escrever na saída HTML.
Codificação de URL: Se genuinamente precisar de um caractere de barra invertida literal dentro de uma URL (o que é extremamente raro), deve ser codificado em percentagem como %5C. No entanto, este quase nunca é o comportamento pretendido quando este erro de validação aparece.