Aujourd'hui, nous allons étudier la sémantique dans le cadre du (X)HTML. Le but de ce cours est d'une part de vous apprendre ce qu'est concrètement la sémantique web, et d'autre part de vous initier à son respect pour la conception de vos futurs sites internet.
Le tutoriel est organisé suivant un système de problématiques avec questions − réponses. Pour chaque problématique du sommaire, nous apporterons une réponse complète et précise de sorte que vous compreniez tout du tutoriel.
Oui, je vois d'ici vos visages se crisper de douleur quand vous lisez « sémantique », vous devez vous dire : « Pfiou, encore un nom scientifique abstrait. » C'est vrai ; cependant, M@teo21 l'a normalement abordé dans ses tutoriels, de façon brève, en effet, mais cela doit vous rappeler des souvenirs — je me trompe ?
Toutefois, puisqu'ici tout part de zéro, j'ai le devoir de faire comme si vous n'en aviez jamais entendu parler. Nous allons donc voir la définition dans le dictionnaire ! (Vous êtes toujours avec moi ? :euh: ) Zéros, à vos dictionnaires je vous prie ! (Et ne me dites pas que je dois vous expliquer ce qu'est un dictionnaire pour respecter la logique de partir de zéro !)
Citation : Dictionnaire Larousse 1994
La sémantique est tout ce qui concerne l'étude scientifique du sens des unités linguistiques et de leurs combinaisons.
Cette définition classique de la sémantique peut vous sembler ne pas concerner l'utilisation du (X)HTML, mais elle a l'intérêt d'introduire un mot primordial, à savoir « sens ». Nous allons donc voir tout de suite une définition plus adaptée à notre problème, dans le but de l'appliquer à nos codes (X)HTML.
Rien de mieux que la liste des principales balises XHTML pour illustrer cette nouvelle définition. Attention, je vous préviens, c'est assez long mais plutôt complet. Cependant, j'ai fait exprès d'omettre l'effet produit par la balise sur l'écran du navigateur pour rester dans la logique de la sémantique.
Élément ou balise
Sens sémantique
<p>
L'élément p définit un paragraphe ou des images.
<hx> qui désigne les balises <h1> à <h6>
L'élément hx définit des titres de moins en moins importants dans l'organisation du document. En général, h1 contient le titre le plus important de la page et donc du contenu, puis viennent les sous-titres h2, h3, etc. Après, on respecte ou non, mais ce qui compte, c'est de garder une certaine hiérarchie.
<ul> et <li>
L'élément ul, avec son compagnon li, définit une liste non ordonnée. On peut l'utiliser par exemple pour une liste de liens dans un menu, ou une liste de courses…
<ol> et <li>
L'élément ol accompagné de li définit une liste ordonnée. On peut s'en servir pour un sommaire ou une liste de commentaires…
<dl>, <dt> et <dd>
L'élément dl définit une liste de définitions. De ce fait, dl sera toujours utilisé avec dt, qui définira le terme, et dd qui contiendra la définition de ce terme.
<table>, <tr>, <th>, <td> et <caption>
Les éléments table, tr, th et td définissent un tableau et doivent donc contenir des données tabulaires ( :-° ), comme un forum — et pas autre chose !
table définit l'ouverture du tableau, tr indique une ligne, th indique les cellules d'en-tête et td indique une cellule.
Petit rappel pour certains : l'élément caption définit le titre d'un tableau et doit absolument être imbriqué à l'intérieur de l'élément table.
<strong>
L'élément strong définit une forte insistance sur un ou des mots. Ces mots prennent donc un autre sens sémantique que du texte normal : on dit qu'ils sont emphasés, ou plus communément mis en évidence.
<em>
L'élément em définit une insistance moyenne sur un ou des mots. Ces mots sont emphasés, mais dans une moindre mesure qu'avec l'élément strong.
<ins>
C'est peut-être une nouvelle balise pour vous : l'élément ins définit une insertion de mots depuis la création du document.
Ainsi, si un jour vous rédigez un article d'actualité et qu'une dépêche vient d'arriver, vous pourrez l'annoncer dans votre article grâce à l'élément ins ! Et vous aurez un petit 20 sur 20 en sémantique. ^^ L'élément est bien évidemment contenu dans une balise <p> au même titre que strong et em.
<del>
L'élément del qui, comme vous l'avez sûrement deviné, vient de « delete », définit un ou des mots (toujours imbriqués dans une balise <p>) qui ont été supprimés du document pendant son évolution.
Un peu paradoxal, me direz-vous. :o Oui, mais si par exemple, vous vous trompez sur l'âge de quelqu'un, vous pouvez mettre la partie fausse dans l'élément del pour signifier que cette partie n'a plus d'importance et est supprimée ; l'âge correct pourra être rajouté avec l'élément ins.
<pre>
L'élément pre désigne un texte qui est déjà préformaté, c'est-à-dire que le texte est écrit comme il doit apparaître : le nombre d'espaces blancs est respecté, et les sauts de ligne peuvent être désactivés.
Cette balise est donc indispensable si vous voulez faire des calligrammes, comme ceux d'Apollinaire (mais bonjour le boulot pour le taper, c'est pour ça que je ne vous donne pas d'exemple ^^ ).
Bien sûr, c'est une balise de type bloc au même titre que <p> : il est donc incorrect d'imbriquer un élément p dans un pre !
<q>
L'élément q définit une courte citation dans un paragraphe. Je vous conseille de l'utiliser le plus souvent possible car les guillemets sont mis automatiquement sur certains navigateurs et, au moins sémantiquement, on voit que ce n'est pas vous qui parlez.
Exemple : <p>M@teo21 vous a toujours dit <q>La pratique c'est mieux que la théorie.</q></p>
<blockquote>
L'élément blockquote est très proche de q, mais cette fois blockquote définit une longue citation qui peut être découpée en plusieurs paragraphes, c'est-à-dire qu'il contiendra toujours une balise <p> pour définir le texte : c'est une balise de type bloc !
Si vous citez une poésie de La Fontaine, de Baudelaire et j'en passe, le blockquote sera fortement conseillé.
<cite>
Nous restons encore dans le domaine des citations avec l'élément cite, puisqu'il désigne effectivement l'auteur d'une citation ou une référence vers une autre source. On peut reprendre l'exemple de l'élément q pour illustrer l'utilisation de cite.
Exemple : <cite>M@teo21</cite> vous a toujours dit <q>La pratique c'est mieux que la théorie.</q>
Enfin, un autre exemple où cite sert à désigner une référence (exemple tiré de la documentation HTML) : pour plus d'informations, voir <cite>[ISO-0000]</cite>. Bien sûr, vous pouvez faire pointer cette référence vers une autre page en utilisant, tout bêtement, un lien.
<acronym>
L'élément acronym permet de définir des acronymes et de spécifier leur signification grâce à l'attribut title.
Un acronyme est un sigle que l'on prononce comme un mot ordinaire, tel que ONU, UNESCO, RADAR, LASER, etc., ou en considérant chaque lettre comme indépendante : URSS, SPA, etc. Voici un exemple : <p>L'organisation internationale qui siège à New York est l'<acronym title="Organisation des Nations Unies">ONU</acronym>.</p>
<abbr>
L'élément abbr est très similaire à acronym ; seulement, abbr sert à définir une forme abrégée, c'est-à-dire une entité qui est écrite de façon réduite. Attention, cela ressemble beaucoup à la définition précédente, soyez donc vigilants. Moi-même, je doute encore beaucoup de l'élément à utiliser.
Pour vous familiariser avec cette notion, voici quelques exemples : « WWW », « HTTP », « SdZ », mais aussi « i.e. », « ex. »…
Comme vous l'aurez remarqué, la différence entre les éléments acronym et abbr est subtile. Et franchement, je ne pense pas que l'on puisse vous reprocher d'avoir pris l'un pour l'autre.
abbr fonctionne comme acronym : l'attribut title permet de renseigner l'abréviation.
<sup> et <sub>
Les éléments sup et sub servent respectivement à mettre en exposant et en indice. Petit moyen mnémotechnique : sup comme « supérieur » et sub comme « submersible » (comme les sous-marins…).
<code>
Finalement, dernière balise importante (ouf…) : l'élément code indique un fragment de code informatique, rien de bien compliqué. N'oubliez pas que c'est une balise de type en ligne.
Eh oui, quand on y réfléchit, la sémantique c'est aussi simple que ça, il suffit d'utiliser toute la bibliothèque de balises offerte par le langage, et ce à bon escient. Et je peux vous assurer qu'avec cette liste, vous avez appris 90 % des balises XHTML parmi les plus utilisées. Pour les curieux, voici quelques éléments à connaître si vous souhaitez approfondir vos connaissances :
kbd ;
dfn ;
var ;
samp.
Voici également un lien vers la spécification HTML du W3C, pour que vous alliez vous-mêmes chercher les définitions. :p
Justement : pour respecter la sémantique du Web, il faut utiliser les balises en fonction de ce que l'on souhaite, c'est-à-dire choisir la balise la plus adaptée à nos besoins. Logique, me direz-vous ? Pas tant que ça. ^^ En effet, il existe de nombreuses solutions qui donnent le même résultat visuel grâce au CSS, mais n'ont aucune valeur au niveau du code ! Cela se révèle souvent avec l'utilisation des balises génériques <div> ou <span> qui n'ont aucun sens sémantique : on peut donc en faire ce que l'on veut !
Lisez bien la partie qui suit… Nous allons entrer dans le vif du sujet.
Oui, mais voilà… :( actuellement, les codes ont évolué, et de plus en plus de nouveaux programmeurs découvrent la puissance du CSS !
C'est très bien, mais attention aux abus ! En effet, on est maintenant arrivé à un effet inverse tout aussi nuisible aux respects des standards du W3C.
Vous me demandez des exemples ? Il est très facile d'en trouver si vous naviguez sur des forums de programmation web pour débutants. Ainsi, je vois parfois des codes avec <div class="titre"> pour insérer un titre ou <div class="texte"> pour un texte…
Il faut que vous sachiez que la balise <div>, très utile pour la mise en page, n'a strictement aucun sens sémantique, et donc aucune fonction ! Elle est neutre à tout point de vue. Un code rédigé seulement avec des <div> (trop par rapport aux besoins) est un code sémantiquement nul… sans but, illogique, et de plus il paraît fouillis, car on se demande : « À quoi sert ce morceau de code ? o_O ». N'est-ce pas ?
Le non-respect de la sémantique se manifeste aussi dans les sites qui utilisent une présentation sous forme de tableau. C'est un problème plus ancien, car maintenant la balise <div> nous permet d'avoir beaucoup plus de liberté dans notre design. L'usage des balises <tr>, <td>, etc. pour la mise en page est donc une infraction aux lois de la sémantique du Web.
Pour moi, il suffit de faire un effort sur l'organisation de vos codes. Il faut qu'une structure logique, et donc sémantique, apparaisse explicitement dans vos codes (il faut qu'elle saute aux yeux).
En gros, cela signifie qu'un titre se désignera toujours par <hx>, un paragraphe par la balise <p>, et de même pour les autres balises que nous avons vues précédemment. ;) Libre à vous ensuite de changer le design du titre avec le CSS, mais, s'il vous plaît, n'insérez pas de <div class="titre"> (qui est un exemple parmi tant d'autres) !
Passons à la pratique. Voici quelque chose que je veux ne plus jamais voir dans vos codes.
<td id="corps">
<div class="titre">Un titre qui ne respecte pas la sémantique</div>
<div class="texte">Un texte qui ne respecte pas la sémantique</div>
</td>
C'est pas très joli, hein. ;) Voici désormais ce que vous devez écrire à la place.
<div id="corps">
<h1>Un titre qui respecte la sémantique</h1>
<p>Un texte qui respecte la sémantique</p>
</div>
C'est bien compris ? Au début, il faudra peut-être que vous vous forciez, ce sera donc long et ennuyeux (car on n'aime pas trop changer les habitudes, hein ^^ ) ; mais après une petite expérience, vous ne réfléchirez même plus au choix d'une balise. Cela deviendra un réflexe. Je vous conseille d'ailleurs de vous référer à la liste des utilisations des balises XHTML que j'ai faite dans la première partie : j'y ai mis toutes les balises les plus utilisées.
Eh ! Reste ici ! Comment on fait pour savoir si on a fait le maximum pour respecter la sémantique ?
Oui, c'est vrai, j'allais oublier. Pour vous aider à savoir si votre code respecte la sémantique, il existe une technique diablement efficace. Mais hyper complexe.
Eh oui : le style des balises étant enlevé, celles-ci ne gardent que leurs aspects sémantiques (leurs sens). Donc, si votre site est illisible sans CSS, c'est-à-dire par exemple qu'un titre est écrit de la même façon que du texte normal, c'est qu'il y a un gros problème… :-° Vous savez ce qu'il vous reste à faire.
Pour désactiver le CSS, rien de plus simple ! Pour les utilisateurs de Firefox, il vous suffit d'aller dans Affichage → Style de la page → Aucun style. Pour ceux qui surfent avec Opera, c'est aussi simple : faites Affichage → Styles → Mode utilisateur, puis décochez les cases qui le sont. Vous pouvez même, grâce à ce même Opera, simuler un navigateur texte : il vous suffit de sélectionner Émuler un navigateur texte dans le menu Mode utilisateur. C'est encore mieux pour travailler sur la sémantique d'une page. Merci à Harvis pour l'astuce.
Pour les autres qui utiliseraient Internet Explorer, je ne peux que leur conseiller de télécharger Firefox ou encore Opera. :D
C'est un petit geste à faire dans vos codes qui peut vous paraître barbant, mais les avantages sont nombreux comme nous allons le voir tout de suite.
Mais quels sont les avantages à respecter une bonne sémantique ?
Vous n'allez pas me croire, mais les avantages sont nombreux (sinon, à quoi bon respecter la sémantique, hein ?). Ils permettent souvent un gain de temps non négligeable pour les flemmards du Web comme moi.
Respecter une bonne sémantique permet :
d'obtenir un code beaucoup plus cohérent, plus logique, plus structuré, et donc plus facile à remanier, car chaque balise ayant une fonction, on sait exactement ce qu'elle désigne : les changements sont donc plus rapides à effectuer sur votre page ;
de limiter l'abondance de class et id. On se perd même parfois : c'est une source d'agacement et une perte de temps ;
de mieux se faire référencer par des moteurs de recherche, tel Google. ;) En effet, une page remplie de <div> paraît neutre aux moteurs ;
de faciliter le travail au niveau du CSS. Cet aspect-là n'est pas flagrant, et ne m'est pas apparu au cours de la première rédaction du tutoriel. Je m'explique : l'utilisation de plusieurs balises permet dans le CSS d'avoir recours à autant de sélecteurs « naturels » de la page. Ainsi, pas besoin de rajouter des balises génériques pour différencier mon contenu : je veux changer le design de mes citations, hop, j'utilise le sélecteur q ou blockquote. Et donc, rien qu'avec une bonne utilisation des balises, on peut sélectionner quasiment l'ensemble des parties souhaitées de la page avec le CSS sans abuser de class et id. C'est un vrai gain de temps ;
mais aussi de respecter les personnes handicapées qui possèdent des navigateurs analysant la sémantique des balises. Si votre page est remplie de <div>, elle n'aura aucun sens pour le navigateur, et la personne sera dans l'impossibilité de visiter votre site : c'est bien triste pour elle. :( Par personnes « handicapées », j'entends tous ceux qui souffrent d'un handicap mineur ou majeur, des malvoyants aux aveugles, etc. Le même problème se pose pour les PDA et autres mobiles, car une bonne partie des styles CSS est, pour des raisons d'affichage, désactivée.
Ce n'est bien sûr qu'un résumé des idées principales. C'est pour cela que j'ajoute l'adresse d'un article plus complet écrit par des professionnels. Vous y trouverez toute une page qui détaille largement les avantages de respecter une bonne sémantique, avec une analyse de code sur Lynx, un navigateur qui affiche une page web en mode « texte », c'est-à-dire sans aspect graphique (qu'avec du texte).
Voici de quoi rendre concret ce que je vous ai dit : OpenWeb : La sémantique. Merci à Nyro Xéo pour le lien. Et comme je suis généreux, je vous invite à visiter un autre site disposant de nombreux tutoriels complets, clairs et structurés sur les sujets en rapport avec l'accessibilité web (et donc la sémantique) : Alsacréations.
Voilà : nous en avons terminé avec ce tutoriel sur la sémantique.
Vous avez tout compris ? Tant mieux, alors (enfin, j'espère). Cela a été un plaisir pour moi de vous suivre dans ce petit tutoriel… Vous avez tous été de bons élèves (sauf toi, là au fond ! :diable: ). À partir de maintenant, vous savez coder en respectant la sémantique web… Alors à vos claviers, et plus vite que ça !