Nous venons d’effectuer un tour d’horizon relativement complet du langage XHTML. Comme on l’a vu, le nombre d’éléments et d’attributs est assez important, permettant de structurer une page et de baliser sa sémantique de manière forte. Cependant, selon la structure du document et le domaine qu’il traite, on peut éprouver le besoin d’enrichir son balisage avec des éléments spécifiques.
Nous avons déjà évoqué plus haut l’attribut id, qui permet de donner un nom à tout élément du document (toutes les balises du langage disposent de cet attribut optionnel). Par exemple, si une liste non ordonnée de liens hypertextes constitue le menu principal d’une page web, on peut indiquer son rôle grâce à l’attribut id : <ul id="menu">
<li><a href="accueil.html">Accueil</a></li> <li><a href="produits.html">Produits</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Nous contacter</a></li> </ul>
Le nom attribué par id doit apparaître une seule fois dans le document, ce qui permet de désigner sans ambiguïté un élément de celui-ci.
En revanche, ce mécanisme ne permet pas de désigner plusieurs éléments du document possédant un rôle identique. Imaginons qu’une page décrive plusieurs recettes de cuisine. Dans chaque recette, on trouve une liste non ordonnée d’ingrédients. Chacune de ces listes a le même rôle : donner les ingrédients d’une recette. Pour le spécifier, on va utiliser cette fois l’attribut class :
<!-- ingrédients de la recette de l’oeuf à la coque --> <ul class="ingrédients">
<li>un oeuf bien frais</li> <li>du pain</li>
<li>du sel</li> </ul>
...
<!-- ingrédients de la recette du chocolat chaud --> <ul class="ingrédients">
<li>2 cuillers à café de cacao non sucré</li> <li>1 morceau de sucre</li>
<li>30 cl de lait</li> </ul>
Comme l’attribut id, l’attribut class est un attribut optionnel disponible pour tout élément du langage XHTML. Contrairement à id, plusieurs éléments du document peuvent posséder un attribut class de même valeur, définissant ainsi un ensemble d’éléments possédant un même rôle.
Notons que plusieurs rôles peuvent être attribués à un même élément, en séparant leurs noms par des espaces dans la valeur de l’attribut class. Imaginons par exemple que nous ayons choisi de caractériser les ingrédients de nos recettes par des propriétés telles que liquide, solide, sucré et salé. Nous pouvons bien sûr écrire : <li class="liquide">lait</li>
ou
<li class="sucré">miel</li> mais aussi
<li class="liquide sucré">sirop de cassis</li>
5.10.2. Les éléments génériques div et span
Pour aller plus loin encore, le langage XHTML met à disposition des développeurs deux éléments génériques. L’un est un élément de type bloc, c’est div. L’autre est un élément en ligne, c’est span. Aucun rôle sémantique n’est attribué à ces éléments. Utilisés sans attribut, ils permettent simplement de définir respectivement un élément bloc neutre et un élément en ligne neutre dans la page, que ce qui présente un intérêt très limité. Mais, utilisés en conjonction avec les attributs id ou class, div et span prennent tout leur sens.
Reprenons l’exemple du menu principal d’une page web et imaginons qu’il n’est pas constitué seulement d’une liste de liens, mais également d’un paragraphe de texte. Comment regrouper sémantiquement ces différents éléments pour signifier que, ensemble, ils forment le menu principal de la page ? Tout simplement en les incluant dans un bloc div nommé de façon pertinente avec id :
<div id="menu">
<p>ZeBootik vous propose :</p> <ul>
<li><a href="accueil.html">Accueil</a></li> <li><a href="produits.html">Produits</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Nous contacter</a></li> </ul>
</div>
Comme on le voit, l’utilisation combinée de l’élément div et de l’attribut id est particulièrement adaptée à la définition des grandes parties qui constituent généralement tout document web : entête, menu, zone principale, pied de page, éventuels encarts publicitaires, etc.
L’élément span, de part son type en ligne, sert naturellement à enrichir la sémantique du document de manière locale. Continuons avec notre exemple culinaire et imaginons que nous souhaitions repérer sémantiquement tous les termes désignant des fruits ou des légumes dans le texte des recettes. Évidemment, aucun élément du langage XHTML ne joue un rôle aussi spécialisé. C’est là que l’élément span intervient. Exemple :
<li>Couper les <span class="fruit">pommes</span>en quartiers</li> <li>Peler et émincer l’<span class="légume">oignon</span></li>
L’élément span ayant une utilisation locale, il est probable qu’il soit utilisé pour repérer plusieurs fois le même rôle sémantique dans une même page. C’est pourquoi il est le plus souvent utilisé avec un attribut class.
Ces mécanismes de balisage peuvent être adaptés à tout domaine. Ils constituent un moyen d’enrichir et de personnaliser la structure et la sémantique d’un document de manière illimitée.