XHTML, attribut 'id' ou 'class' ?

Il est possible de nommer les balises XHTML via 2 attributs : id et/ou class. Quel est l'interêt ? Pouvoir ensuite appliquer des styles CSS aux balises ainsi nommées ou utiliser javascript pour manipuler la DOM à sa convenance.

Utilisation de l'attribut id

L'attribut id permet d'identifier une balise d'un document XHTML de manière unique. Deux balises ne doivent pas avoir 2 attributs id ayant la même valeur au sein du même document.

Exemple d'utilisation :

<div>
     <div>
          <div id='peinture'>
                    les grands artistes du XHTML
          </div>
     </div>
</div>

Dans un fichier CSS externe, on pourra ainsi modifier la couleur de font du <div> via la syntaxe suivante :

#peinture {background-color:#ff0000;}

Dans un fichier JS externe, on pourra ainsi modifier la largeur du <div> via la syntaxe suivante :

document.getElementById("peinture").style.width = "100px";

Utilisation de l'attribut class

L'attribut class permet de nommer un groupe de balises au sein d'un même document XHTML. Plusieurs balises peuvent ainsi avoir un attribut class ayant la même valeur.

Exemple d'utilisation :

<div class='peinture'>
     <div class='peinture'>
          <div class='peinture'>
                    les grands artistes du XHTML
          </div>
     </div>
</div>

Dans un fichier CSS externe, on pourra ainsi modifier la couleur de font des 3 <div> via la syntaxe suivante :

.peinture {background-color:#ff0000;}

<< Commentaire XHTML

Validateur XHTML >>

Balises Xhtml

XHTML, attribut 'id' ou 'class' ?

Utilisation de l'attribut id

Utilisation de l'attribut class