Les attributs id et class permettent de distinguer des balises de même nature (des paragraphes par exemple) qui n'ont pas la même «finalité» (par exemple, un paragraphe pour les théorèmes et un paragraphe pour les démonstrations).

Définir un groupe de balises avec l'attribut class

L'attribut class="nom_de_la_classe" permet de distinguer et mettre en valeur de la même manière des balises ayant les même caractéristiques. Par exemple, dans une page formée de plusieurs paragraphes, on pourra distinguer :

• des paragraphes contenant du «texte simple» qui seront délimités par <p> et </p>.
  <p> Un paragraphe classique. </p>
• des paragraphes servant d'énoncé d'exercices (par exemple).
  On les regroupe dans une classe distincte avec <p class="enonce"> et </p>.
  <p class="enonce"> Un paragraphe qui fait partie du groupe "enonce". </p>

Les valeurs choisies pour l'attribut class (comme la valeur "enonce" utilisée ci-dessus) relèvent bien sûr du choix du codeur, il n'y a pas de valeurs prédéfinies.

Balises universelles div et span

Parfois, il n'existe pas de balise spécifique qui corresponde à ce dont on a besoin. On utilise alors une balise générique dotée de l'attribut class="" (à nommer...):

• La balise <div class="">...</div> est de type bloc.
• La balise <span class="">...</span> est de type en-ligne.

La mise en forme des éléments html de même attribut class sera faite ensuite par du code css.

Définir une balise de manière unique avec l'attribut id

Attribuer à une balise un identifiant unique permet de «naviguer» facilement à l'intérieur d'une page (d'un site) web et/ou de distinguer un élément en particulier pour une mise en page spécifique. L'attribut se déclare sous la forme id="nom_de_l_identifiant".

Compléments

On verra une utilisation très précise de ces balises, des classes et des identifiants...

• dans le paragraphe Liens intra-page de la partie Arborescence ;
• dans le paragraphe Sélecteurs de la partie Css.

Pour visualiser l'imbrication et la dénomination des balises, on importe (à nouveau) un fichier .css. Ce fichier met en forme les groupes de balises ayant pour nom de classe rouge, vert, bleu, gras, souligne ou italique (les mises en forme obtenues sont évidentes). En attribuant ces attributs à différentes balises <span>, essayer d'obtenir l'affichage ci-dessous :

Par défaut, chaque nouvel item d'une liste doit être affiché sous le précédent. Pour établir un menu déroulant, il faut donc distinguer la liste formant les onglets du menu, les listes formant les items de chaque onglet et les listes usuelles utilisées dans la page web.
Modifier le code .html ci-dessous pour obtenir un menu déroulant fonctionnel grâce au fichier .css importé.

Les noms (des classes ou des identifiants) utilisés sont menu, onglet et item. Il y a trois valeurs à attribuer. Pour cela, repérer les balises qui jouent le même rôle de mise en forme.