Verificação HTML: Valor inválido "" para o atributo "id" no elemento X: Um ID não pode ser uma string vazia.

Sobre este problema HTML

O validador reporta “Valor inválido “” para o atributo id no elemento X: Um ID não pode ser uma string vazia” quando qualquer elemento inclui um atributo id vazio. Segundo o padrão HTML, id é um atributo global usado como um identificador único em todo o documento. Um identificador vazio não é um valor válido e é ignorado por algumas funcionalidades, levando a problemas difíceis de depurar.

Isto importa para acessibilidade e interoperabilidade. Funcionalidades que dependem de IDs—navegação por fragmentos (#target), <label for>, atributos ARIA como aria-labelledby/aria-controls, e APIs DOM como document.getElementById()—requerem um valor não vazio e único. IDs vazios quebram essas ligações, podem degradar a saída de tecnologias assistivas e violam a conformidade, o que pode ocultar bugs entre navegadores.

Como corrigir:

Se o elemento não precisar de um identificador, remova o atributo id completamente.
Se precisar de um, forneça um valor não vazio e único, por exemplo, id="main-content".
Assegure unicidade em toda a página; cada id deve ocorrer apenas uma vez.
Use tokens simples e previsíveis: evite espaços, prefira letras minúsculas, dígitos, hífenes e sublinhados (por exemplo, feature-1). Embora a especificação permita uma gama ampla de caracteres, manter-se com caracteres compatíveis com URLs e seletores evita armadilhas.

Exemplos

Exemplo que desencadeia o erro do validador (id vazio)

<div id=""></div>

Correto: remover um id vazio desnecessário

<div></div>

Correto: fornecer um id significativo e único

<section id="features"></section>

Associação de etiqueta problemática com id vazio (inválido)

<label for="">Email</label>
<input type="email" id="">

Associação correta etiqueta–controlo

<label for="email">Email</label>
<input type="email" id="email">

Relação ARIA correta

<h2 id="pricing-heading">Preços</h2>
<section aria-labelledby="pricing-heading">
  <p>Escolha um plano.</p>
</section>

Alvo de navegação por fragmento correto

<nav>
  <a href="#contact">Contacto</a>
</nav>
<section id="contact">
  <h2>Contacte-nos</h2>
</section>

Documento completo mínimo (validado) demonstrando ids adequados

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Valid IDs Example</title>
  </head>
  <body>
    <main id="main-content">
      <h1 id="page-title">Welcome</h1>
      <p>Jump to the <a href="#details">details</a>.</p>
      <section id="details">
        <h2>Details</h2>
      </section>
      <form>
        <label for="email">Email</label>
        <input id="email" type="email">
      </form>
    </main>
  </body>
</html>