Assinar
Semântica no HTML – Classes e ids
Existem quatro atributos HTML que são praticamente univerais, você pode usar em quase qualquer elemento. São eles o class, id, lang e title.
O class e o id são muito parecidos, inclusive muitas pessoas confundem e usam um no lugar do outro frequentemente. Ambos tem a função de descrever um elemento, sendo o id para identificação e class pra classe (ou grupo).
Pra exemplificar, vou criar um parágrafo sobre mim:
<p id="alexandre-gomes-gaigalas" class="brasileiro">Alexandre é o editor do Acorda pra Web!</p>
Identifique
O id é como um número de RG, não podem existir dois iguais em uma página, por esse motivo eu escolhi colocar meu nome completo e não somente alexandre, dessa maneira eu permito usar ids para outros Alexandres na página.
Classifique
O class classifica o elemento. No caso acima eu utilizei o grupo brasileiro para classificar nacionalidade.
Usando essa classe eu poderia por exemplo colocar um fundo verde e amarelo usando CSS em todos os parágrafos que classificassem brasileiros, ou poderia ocultar todos os parágrafos exceto os brasileiros usando JavaScript e DOM.
É possível ainda utilizar várias classes no mesmo elemento, como veremos abaixo:
<p id="alexandre-gomes-gaigalas" class="brasileiro maior-de-idade programador">Alexandre é o editor do Acorda pra Web!</p>
O exemplo acima é mais rico. As classes brasileiro, maior-de-idade e programador foram colocadas separadas por espaços. Isso me permitiria trabalhar normalmente usando CSS e JavaScript separadamente com cada classe, selecionando apenas brasileiros, apenas programadores ou apenas maiores de idade.
Conclusão
Entendendo a real função dos ids e classes você percebe como é errado colocar uma classe ou id com nome direita, ou vermelho ou mesmo rodapé. Esses são todos nomes que descrevem aspectos visuais, não conteúdo.
Você tem que pensar no motivo que te leva a identificar ou classificar um elemento, e não no resultado visual que deseja atribuir usando CSS. Não escravize o HTML.
Pra finalizar o artigo, vamos criar um exercício mental e colaborativo, e dependendo desse exercício eu crio um mega-exemplo e coloco pra vocês semana que vem:
Como você se classificaria usando classes no HTML?
8/5/2007 às 2:28 am
Os desenvolvedores realmente precisam entender isso, eu ainda vejo muito coisas como:
<p id="direita" class="verdana11preto"></p>
o basico é:
HTML define o Conteúdo
CSS define a aparência
segue a minha classificação:
<p id="carlos_andre_ferrari" class="brasileiro maior_de_idade palmas tocantins">Carlos André é desenvolverdor da <abbr title="Secretaria de Comunicação do Tocantins">SECOM/TO</abbr></p>
[]’s
28/2/2008 às 11:48 pm
Alexandre, parabéns pelo post. Muito útil e bem escrito. O tipo de pegadinha para qualquer desenvolvedor (como eu) que acabo de aprender uma coisa que nos passa despercebido.
Eu acredito que você esteja tecnicamente certo. Mas na prática como ficaria isso? Qual é o certo para construir uma estrutura por exemplo de: “DIV do topo” , “DIV do corpo” e “DIV de rodapé” ? valeu.
5/10/2009 às 11:19 pm
[...] linhas e reduz pra meia dúzia de pequenas funções de 10 ou 15 linhas. Ou pega aquele CSS monstro cheio de classes e IDs desnecessários e enxuga ao [...]