Verificação HTML: Um ID não deve conter espaços em branco

Sobre este problema HTML

O atributo id identifica unicamente um elemento dentro de um documento, tornando-o essencial para ligações de fragmento, direcionamento JavaScript, estilização CSS e associações de etiquetas. De acordo com a especificação HTML, um valor id deve conter pelo menos um carácter e não deve conter qualquer espaço em branco ASCII. Isto significa que espaços, tabulações, feeds de linha, retornos de carro e feeds de formulário são todos proibidos.

Um erro comum é incluir acidentalmente um espaço num valor id, o que efetivamente o faz parecer múltiplos valores — similar a como o atributo class funciona. No entanto, ao contrário de class, o atributo id não suporta valores separados por espaços. Quando um navegador encontra um id com um espaço, o comportamento torna-se imprevisível: alguns navegadores podem tratar apenas a primeira palavra como o ID, enquanto os seletores CSS e JavaScript podem falhar completamente.

Porque isto importa

Ligações de fragmento quebradas: Uma ligação como <a href="#my section"> não irá fazer scroll corretamente para um elemento com id="my section" em todos os navegadores.
Falhas de JavaScript: document.getElementById("my section") pode não retornar o elemento esperado, e document.querySelector("#my section") irá gerar um erro de sintaxe porque espaços não são válidos em seletores de ID CSS sem escaping.
Problemas de CSS: Um seletor como #my section direciona um elemento com id="my" que tem um descendente elemento <section> — não o que você pretendia.
Acessibilidade: Leitores de ecrã e tecnologias assistivas dependem de atributos id para associações de etiquetas (por exemplo, <label for="...">). Um id quebrado pode quebrar a acessibilidade de formulários.

Boas práticas para valores `id`

Embora a especificação HTML tecnicamente permita qualquer carácter não-espaço em branco num id, é uma boa prática usar apenas letras ASCII, dígitos, hífens (-) e sublinhados (_). Começar o valor com uma letra também garante compatibilidade máxima com seletores CSS sem necessidade de escaping.

Exemplos

❌ Inválido: `id` contém um espaço

<div id="main content">
  <p>Welcome to the page.</p>
</div>

O espaço entre main e content torna este um id inválido.

✅ Corrigido: Substitua o espaço por um hífen

<div id="main-content">
  <p>Welcome to the page.</p>
</div>

✅ Corrigido: Substitua o espaço por um sublinhado

<div id="main_content">
  <p>Welcome to the page.</p>
</div>

✅ Corrigido: Use camelCase

<div id="mainContent">
  <p>Welcome to the page.</p>
</div>

❌ Inválido: `id` com um espaço quebra a associação de etiqueta

<label for="first name">First Name</label>
<input type="text" id="first name">

O atributo for não se irá associar adequadamente com o input, quebrando a acessibilidade.

✅ Corrigido: Remova espaços em branco de ambos `for` e `id`

<label for="first-name">First Name</label>
<input type="text" id="first-name">

❌ Inválido: Espaços em branco no início ou fim

Os espaços em branco nem sempre são óbvios. Um espaço no fim ou um erro de copiar-colar pode introduzir espaços em branco invisíveis:

<section id="about ">
  <h2>About Us</h2>
</section>

✅ Corrigido: Remova todos os espaços em branco

<section id="about">
  <h2>About Us</h2>
</section>

Se você está a gerar valores id dinamicamente (por exemplo, a partir de um CMS ou base de dados), certifique-se de que limpa e higieniza os valores removendo espaços em branco e substituindo espaços por hífens ou sublinhados antes de os renderizar em HTML.