Olá!
O atributo id precisa ser único no documento porque é esse o propósito definido na especificação do HTML: indicar o identificador único de um elemento. Inclusive, se tentarmos fazer um teste usando um mesmo id em várias tags com um validador de HTML, um erro como Error: Duplicate ID <id>
é indicado.
Na prática, essa capacidade de identificar um elemento de forma única em um documento — isso é, sem ambiguidade — acaba sendo útil em algumas situações como:
- especificar âncoras para trechos específicos de um documento HTML, por meio da sintaxe de fragment identifiers;
- identificar elementos para serem referenciados em JavaScript (por exemplo, com a função
document.getElementById()
); - estilizar uma tag específica no documento com CSS.
Em todos esses casos, se utilizássemos um mesmo id em várias tags de um documento, isso traria confusão para o navegador:
- no caso de fragment identifiers, como ele saberia qual trecho do documento deveria ser exibido?
- no caso do JavaScript, qual dos elementos deveria ser devolvido por
document.getElementById()
? - no caso do CSS, uma estilização que deveria ser específica para um elemento acabaria "vazando" para outros elementos (lembre-se que, se o objetivo é reutilizar estilos em vários lugares, o atributo
class
já existe para isso).
De todo modo, os navegadores acabam não reclamando disso, pois são muito permissivos em relação a erros de sintaxe e tentam contornar ou ignorar erros que não causam problemas imediatos.
Referências e links interessantes sobre o assunto