Diferença entre id e classe | HTML5 e CSS3 parte 1: crie uma página da Web

Pedro,

O id é um identificador. O recomendável é usar de forma única, para facilitar a localização de elementos na sua página.

Quando você precisar acessar um elemento (tag) via Javascript você pode utilizar a função (getElementById), ele vai buscar apenas pelo atributo id, e se espera que exista apenas um elemento.

Mas sua página vai renderizar mesmo com IDs duplicados. Isso é apenas uma questão de semântica.

No caso de class podemos usar a função (getElementsByClassName), onde pode ter um ou mais elementos.

Outro ponto importante do id ser único na página é que você pode usar um hash na URL que corresponde ao id do elemento na página.

Exemplo simples:

<html>
    <head>
        <title>sample ID</title>
    </head>
    <body>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div id="meuIDUnico">Meu elemento com ID único</div>
    </body>
</html>

Se você salvar a página acima e chamar teste.html e abrir no browser e chamar teste.html#meuIDUnico você vai perceber que o browser vai focar (scroll) nesse elemento.

Você também pode "validar" seu código HTML com https://validator.w3.org/ (caso existam dois IDs com o mesmo nome) o validador vai apontar um "Erro" na sua marcação HTML.