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

Sobre este problema HTML

Um identificador de fragmento de URL é a parte de um URL que segue o carácter #. Normalmente aponta para um elemento na página que tem um atributo id correspondente. De acordo com a especificação URL, certos caracteres — incluindo espaços — não são permitidos aparecer literalmente num URL. Quando o Validador HTML do W3C encontra um espaço em bruto num fragmento, reporta isto como um carácter ilegal.

Este problema importa por várias razões. Os navegadores podem lidar com espaços sem escape em fragmentos de forma inconsistente, levando a navegação intra-página quebrada. Leitores de ecrã e outras tecnologias de apoio dependem de URLs bem formados para navegar os utilizadores para a secção correta de uma página. Além disso, espaços em atributos id são em si inválidos em HTML — o atributo id não deve conter quaisquer caracteres de espaço em branco ASCII. Então a causa raiz envolve frequentemente duas violações separadas: um id inválido e um URL de fragmento inválido.

A melhor abordagem é usar hífenes (-) ou sublinhados (_) em vez de espaços nos seus valores id, depois fazer corresponder o fragmento adequadamente. Isto produz URLs limpos, legíveis e partilháveis (por exemplo, page.html#contact-info em vez de page.html#contact%20info). Se está a trabalhar com um CMS ou ferramenta de construção que auto-gera valores id com espaços, configure-a para produzir identificadores separados por hífen e em minúsculas.

Se absolutamente não consegue alterar os valores id (por exemplo, são gerados por um sistema de terceiros), pode codificar por percentagem os espaços como %20 no href. Isto satisfaz as regras de sintaxe URL, mas note que um id contendo espaços ainda é HTML inválido por si só. Corrigir o id é sempre a solução preferida.

Exemplos

Inválido: espaço no fragmento e `id`

Isto desencadeia o erro do validador porque href="#My Section" contém um espaço sem escape. O id="My Section" também é HTML inválido já que valores id não podem conter espaços.

<a href="#My Section">Go to section</a>

<h2 id="My Section">My Section</h2>

Corrigido: fragmento e `id` separados por hífen

Substitua espaços por hífenes tanto no id quanto no fragmento. Esta é a abordagem mais limpa e mais amplamente recomendada.

<a href="#my-section">Go to section</a>

<h2 id="my-section">My Section</h2>

Corrigido: fragmento e `id` separados por sublinhado

Sublinhados funcionam igualmente bem se preferir essa convenção.

<a href="#my_section">Go to section</a>

<h2 id="my_section">My Section</h2>

Alternativa: codificação por percentagem do espaço

Codificar o espaço como %20 resolve o erro de URL de fragmento, mas o id com um espaço ainda é HTML inválido. Use isto apenas como último recurso quando não consegue controlar os valores id.

<a href="#My%20Section">Go to section</a>

<!-- Note: this id is still invalid HTML due to the space -->

<h2 id="My Section">My Section</h2>

Documento válido completo

Um exemplo completo demonstrando múltiplas ligações intra-página com fragmentos e valores id adequadamente formatados:

<!doctype html>
<html lang="en">
  <head>
    <title>Page sections</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#getting-started">Getting Started</a></li>
        <li><a href="#advanced-usage">Advanced Usage</a></li>
        <li><a href="#frequently-asked-questions">FAQ</a></li>
      </ul>
    </nav>

    <h2 id="getting-started">Getting Started</h2>
    <p>Introduction content here.</p>

    <h2 id="advanced-usage">Advanced Usage</h2>
    <p>Advanced content here.</p>

    <h2 id="frequently-asked-questions">Frequently Asked Questions</h2>
    <p>FAQ content here.</p>
  </body>
</html>