Verificação HTML: ID duplicado "X".

Sobre este problema HTML

O atributo id serve como um identificador único para um único elemento no DOM. A especificação HTML requer explicitamente que os valores de id sejam únicos em todo o documento. Quando reutiliza um id, você viola este contrato, e as consequências podem ser subtis mas de grande alcance.

O comportamento JavaScript torna-se imprevisível. Métodos como document.getElementById() irão apenas devolver o primeiro elemento com um determinado id, ignorando silenciosamente quaisquer duplicados. Isto pode fazer com que os scripts visem o elemento errado ou falhem ao interagir com elementos que você espera que alcancem.

Os seletores CSS podem não se aplicar como pretendido. Embora a maioria dos browsers irá estilizar todos os elementos com um id duplicado, este comportamento não é garantido pela especificação e pode levar a inconsistências entre browsers.

A acessibilidade fica comprometida. Leitores de ecrã e outras tecnologias assistivas dependem de IDs únicos para associar etiquetas com controlos de formulário (através da associação for/id), ligar referências aria-describedby ou aria-labelledby a elementos específicos, e navegar identificadores de fragmento (ligações de âncora). IDs duplicados quebram estas associações, tornando potencialmente o conteúdo confuso ou inutilizável para pessoas que dependem de tecnologia assistiva.

A navegação de fragmento falha. Quando um URL contém uma hash como #section-intro, o browser rola para o elemento com esse id. Se múltiplos elementos partilharem o mesmo id, apenas o primeiro será visado, que pode não ser o destino pretendido.

Causas comuns de IDs duplicados incluem copiar e colar blocos HTML sem atualizar os valores de id, gerar conteúdo dinamicamente num ciclo sem anexar um sufixo único, e reutilizar parciais de template que contêm atributos id codificados.

Para corrigir esta questão, audite o seu documento para valores de id repetidos. Se múltiplos elementos precisarem do mesmo identificador para fins de estilização, use o atributo class em vez disso. Se o id for necessário para JavaScript ou referências ARIA, torne cada valor único — por exemplo, anexando um número ou sufixo descritivo.

Exemplos

❌ IDs duplicados em múltiplos elementos

<div id="card">
  <h2>First Card</h2>
</div>
<div id="card">
  <h2>Second Card</h2>
</div>

Ambos os elementos <div> partilham id="card", o que desencadeia o erro de validação.

✅ Use IDs únicos

<div id="card-1">
  <h2>First Card</h2>
</div>
<div id="card-2">
  <h2>Second Card</h2>
</div>

✅ Use `class` em vez disso quando não precisar de identificação única

<div class="card">
  <h2>First Card</h2>
</div>
<div class="card">
  <h2>Second Card</h2>
</div>

❌ IDs duplicados quebram associações de etiquetas

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

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

Ambos os inputs partilham id="email", então a segunda <label> irá incorretamente apontar para o primeiro input. Um utilizador de leitor de ecrã que clique em “Personal Email” seria focado no campo errado.

✅ IDs únicos para cada par etiqueta–input

<label for="work-email">Work Email</label>
<input type="email" id="work-email" name="work_email">

<label for="personal-email">Personal Email</label>
<input type="email" id="personal-email" name="personal_email">

❌ IDs duplicados em conteúdo repetido dinamicamente

Isto acontece frequentemente quando se gera HTML num ciclo ou se reutiliza um template:

<section id="product">
  <h2>Widget A</h2>
</section>
<section id="product">
  <h2>Widget B</h2>
</section>
<section id="product">
  <h2>Widget C</h2>
</section>

✅ Anexe um sufixo único

<section id="product-1">
  <h2>Widget A</h2>
</section>
<section id="product-2">
  <h2>Widget B</h2>
</section>
<section id="product-3">
  <h2>Widget C</h2>
</section>

Se nenhum elemento precisar realmente de ser identificado de forma única, remova o id inteiramente e use uma class ou um atributo data em vez disso.