Verificação HTML: A primeira ocorrência do ID "X" foi aqui.

Sobre este problema HTML

A especificação HTML exige que cada valor do atributo id seja único dentro de um documento. Quando o validador encontra o mesmo id em dois ou mais elementos, gera um erro na segunda (e subsequentes) ocorrências, juntamente com uma mensagem complementar — “A primeira ocorrência do ID ‘X’ foi aqui” — apontando para o elemento original. Esta mensagem complementar ajuda você a comparar rapidamente ambas as localizações e decidir qual renomear ou remover.

Por que IDs duplicados são um problema

Acessibilidade: Leitores de ecrã e outras tecnologias assistivas dependem de IDs únicos para associar elementos <label> com controlos de formulário, para navegar relações ARIA como aria-labelledby e aria-describedby, e para saltar para marcos da página. Quando os IDs estão duplicados, estas associações quebram, deixando os utilizadores confusos ou incapazes de interagir adequadamente com a página.

Comportamento JavaScript: Métodos como document.getElementById() retornam apenas o primeiro elemento correspondente. Se pretender direcionar o segundo elemento com um ID duplicado, o seu código operará silenciosamente no elemento errado. Isto pode levar a bugs difíceis de rastrear.

Especificidade CSS: Embora os seletores #my-id estilizem todos os elementos com esse ID na maioria dos navegadores, este é um comportamento não-padrão. Depender dele leva a estilos frágeis e imprevisíveis.

Navegação por fragmento: Links usando href="#section" rolam para o primeiro elemento com esse ID. IDs duplicados tornam impossível fazer link para a segunda ocorrência.

Como corrigir

Identifique as duplicatas. O validador informa você o número da linha da primeira ocorrência e o número da linha da duplicata. Compare ambos os elementos.
Renomeie um dos IDs para algo único e descritivo. Atualize quaisquer referências correspondentes (labels, atributos ARIA, seletores JavaScript, regras CSS e links âncora).
Use class em vez de id quando precisar aplicar o mesmo estilo ou comportamento a múltiplos elementos. As classes são concebidas para serem reutilizadas; os IDs não.

Exemplos

❌ IDs duplicados desencadeiam o erro

<div id="product-card">
  <h2>Widget A</h2>
  <p>A useful widget.</p>
</div>

<div id="product-card">
  <h2>Widget B</h2>
  <p>Another useful widget.</p>
</div>

O validador reportará um erro no segundo div e exibirá a mensagem “A primeira ocorrência do ID ‘product-card’ foi aqui” apontando para o primeiro div.

✅ Corrigido: Atribuir a cada elemento um ID único

<div id="product-card-a">
  <h2>Widget A</h2>
  <p>A useful widget.</p>
</div>

<div id="product-card-b">
  <h2>Widget B</h2>
  <p>Another useful widget.</p>
</div>

✅ Corrigido: Usar uma class para estilo ou comportamento partilhado

Se ambos os elementos não precisarem ser direcionados individualmente, substitua o id por uma class:

<div class="product-card">
  <h2>Widget A</h2>
  <p>A useful widget.</p>
</div>

<div class="product-card">
  <h2>Widget B</h2>
  <p>Another useful widget.</p>
</div>

❌ IDs duplicados quebram uma associação de label

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

<label for="email">Backup Email</label>
<input type="email" id="email" name="backup-email">

Ambos os labels apontam para for="email", mas apenas o primeiro input será associado. O segundo label efetivamente tem um link quebrado.

✅ Corrigido: IDs únicos para cada controlo de formulário

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

<label for="backup-email">Backup Email</label>
<input type="email" id="backup-email" name="backup-email">

Agora cada <label> associa-se corretamente com o seu próprio <input>, e tanto as tecnologias assistivas como o JavaScript podem direcionar cada campo de forma confiável.