Identificadores de elemento: os atributos id e class

O atributo id define um nome para o elemento que o contém, esse nome deve ser único em um documento, ou seja, não pode haver dois elementos com nomes iguais num mesmo documento. Já o atributo class especifica o nome de uma classe para um elemento.

Assim, vários elementos podem possuir a mesma classe e um mesmo elemento pode possuir várias classes, separadas por espaço.

O principal objetivo desses atributos é funcionar como seletor no CSS, ou seja, identificar quais elementos devem ser estilizados por uma regra CSS. Veja um exemplo bem simples a seguir [w3c]. Não se preocupe com as tags que você ainda não estudou.

Nesse exemplo, foram definidas três classes, nomeadas de info, warning e error. O seguinte fragmento CSS permite que essas mensagens sejam exibidas em três cores diferentes: verde, se for da classe info, amarela, se for da classe warning e vermelha se for da classe error.

Os elementos <div> e <span> juntamente com os atributos id e class oferecem mecanismos para adicionar estrutura ao documento HTML. Elas são tags de agrupamento, usadas para agrupar informações que terão uma mesma configuração. O elemento <span> é utilizado para agrupar informações dentro de um mesmo grupo e <div> para informações de blocos diferentes. Não se preocupe, esse assunto será revisto em detalhes quando você estiver aprendendo CSS.

Estes dois atributos, id e class, são chamados de atributos globais, eles podem ser utilizados em qualquer elemento HTML. Outros exemplos de atributos globais são: accesskey, style, tabindex e title.