Classe ou identifiant ?
Un identifiant id doit être unique dans la page, alors qu’une classe peut être appliqué à plusieurs éléments. Typiquement, on utilisera un identifiant pour isoler un élément, tandis qu’une classe servira pour cibler différents éléments auxquels on souhaite appliquer un même style ou effet javascript.
Un élément peut avoir plusieurs classes, exemple :
Il est ensuite possible de cibler ce div en CSS:
div.message { padding: 1em; }
div.warning { font-weight: bold; }
div.critical { color: red; }
Voir même:
div.warning.critical { color: red; background-color: #ff0; }
name, name, et les meta
Aux débuts d’HTML, pour pointer vers un endroit à l’intérieur d’une page on créait une ancre (anchor) à laquelle on attribuait un identifiant via son attribut “name”. Exemple :
Internet Explorer interprète encore aujoud’hui un attribut name comme un id. Par conséquent, les balises meta ayant un name (description, keywords, etc) sont ciblées par Javascript.
Copiez ceci dans la barre d’adresse de votre navigateur :
javascript:alert(document.getElementById('MSSmartTagsPreventParsing').tagName);
Sémantique
En plus de leur utilité en CSS ou en Javascript, les identifiants permettent de faire des liens internes à la page. Si les titres d’un article sont repérés on pourra proposer une table des matières. Et si les différentes zones de la page ont des identifiants, on pourra proposer des raccourcis vers la navigation, le contenu, et vers le pied de page (souvent appelés liens d’évitement ou “skiplinks”).
Le signe underscore
La spec HTML autorise le signe ‘_’ dans les identifiants, mais pas la spec CSS. En pratique ce n’est pas vraiment un problème car les navigateurs ne se braquent pas.