A partir dessa pergunta cria-se bastante confusão e muitos acabam utilizando qualquer uma das duas opções sem saber qual a mais adequada.

Inicialmente ambos parecem “fazer a mesma coisa”, mas vamos ver algumas diferenças importantes:

1 – Classes não são únicas

- É possível utilizar a mesma classe para muitos elementos;

<div class=”box”></div>
<div class=”box”></div>
<div class=”box”></div>

- Um elemento pode possuir diversas classes.

<div class=”box”></></div>
<div class=”box big”></></div>
<div class=”box big left”></></div>

2 – IDs são únicos

- Cada elemento só pode ter um ID;
- Cada página só pode ter um elemento com aquele ID.
Importante: seu código não vai ser válido se você usar o mesmo ID para dois elementos.

2.1 – IDs possuem funcionalidades específicas

Ao contrário das classes que não possuem funcionalidades especiais nos browser, os IDs têm o que chamamos de “valor de hash” para URL’s.
Ex: se você digitar www.rafaelvergani.com/#contato, o navegador vai localizar o elemento com ID=”contato” e automaticamente vai exibir essa parte do conteúdo na tela.

3 – Elementos podem ter classes e IDs simultaneamente

Você pode declarar classes e IDs em um elemento desde que você respeite a regra número 2 citada acima.

<div id=”imagem” class=”semBorda”>