Classes e ids
O id é a identidade de um elemento, é como se fosse o RG dele. Ele deve ser único em todo o documento. Ele é
definido pelo atributo id:
<p id="meu-paragrafo">Conteúdo</p>Elementos podem ter múltiplas classes, que são separadas umas das outras por espaços. E vários elementos podem ter a mesma classe. Elas foram criadas pensando no reaproveitamento. Veja abaixo um exemplo com atribuições de uma classe e de múltiplas classes:
<button class="alert-button">Botão</button>
<button class="alert-button big-button">Botão</button>Tanto classes como ids são opcionais. Você só os define quando precisa. E quando você precisa defini-los? Geralmente, quando você precisa trabalhar com o elemento em outra tecnologia, geralmente Javascript ou CSS, mas podem ser outras tecnologias também, como C++. Uma das formas de encontrar elementos é procurando pelo id ou por uma ou mais classes.
Outro uso dos ids é para links internos. Todo elemento com um id pode ser linkado seguindo esse
modelo: url#id. Assim, se uma página exemplo.html tem um elemento
<p id="paragrafo-1">, um link exemplo.html#paragrafo-1 leva para o elemento com id
paragrafo-1 da página exemplo.html.
Geralmente, é melhor evitar usar ids, a não ser que você queira usá-los para criar links internos, porque eles são muito específicos. Como são únicos, por natureza, eles não foram feitos para o reaproveitamento. Então, pense bem antes de usar um id. Só use se você for fazer algo que jamais precisará ser aplicado a outro elemento, uma coisa realmente muito específica. E, acredite, muitas vezes você acha que uma coisa só vai precisar ser feita em um elemento, e depois você descobre que precisa fazer a mesma coisa em outros elementos. Por isso, pense muito antes de usar ids.
O HTML é muito permissivo quanto às regras de nomenclatura de classes e ids. Ele permite praticamente tudo. As únicas restrições são que a classe/id não pode ser vazia e não pode conter espaços. Assim, ids e classes estranhos como esses são válidos:
<h1 id="$(SP)"> ... </h1><h1 id="[]98"> ... </h1><h1 class="98AL**"> ... </h1>
Mesmo você podendo escolher esses nomes malucos, não faça isso, por favor. Ninguém vai entender o que você quis dizer, ou seja, acaba com a legibilidade da marcação. Além disso, você pode ser obrigado a trocar de id/classe, porque muitas tecnologias que trabalham com HTML, inclusive Javascript e CSS podem não conseguir referenciar elementos com esses caracteres. Por isso, recomenda-se usar apenas letras, dígitos e underlines e não começar o id ou a classe com um dígito.