Les balises génériques et les sélecteurs de balises sont les notions les plus importantes lorsqu'on écrit du code .html. Ces éléments 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>

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.

Comme dans le cas des groupes de balises, c'est l'appel au nom de la classe dans le fichier .css qui permettra de mettre en valeur le contenu de ces balises.

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.

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 l'onglet Arborescence ;
• dans le paragraphe Sélecteurs de l'onglet 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>, essayez 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.

Modifiez le code Html ci-dessous pour obtenir un menu déroulant fonctionnel grâce au fichier .css importé. Cliquez si besoin sur le bouton «Affichage à obtenir ?» pour visualiser le rendu dynamique de ce menu.