La sémantique

Oui, je vois d'ici vos visages se crisper de douleur quand vous lisez "sémantique", vous devez vous demander : "Piouf, encore un nom scientifique abstrait".
C'est vrai, mais normalement M@teo21 l'a abordé dans ses tutoriels, d'une façon brève, en effet, mais cela doit vous rappeler des souvenirs - je me trompe ?

Mais comme ici, tout part de zéro, j'ai le devoir de faire comme si c'était le cas. Donc nous allons voir la définition dans le dictionnaire ! ( Vous êtes toujours avec moi ?)
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 à zéro !)

Attention ouvrez grand vos yeux...

Citation : Dictionnaire Larousse 1994

Bien vu, jeune zéro .

Nous allons donc voir tout de suite une définition plus logique et plus compréhensible de la sémantique dans le but de l'utiliser dans notre code (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'oublier l'effet produit par la balise sur le navigateur pour rester dans la logique sémantique.

Liste d'utilisation des principales balises XHTML

Elément ou Balise	Sens sémantique
<p>	L'élément p définit un paragraphe et / 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 logique
<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 course...
<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... La différence avec ul est qu'ici ol sera précédé d'un nombre au lieu d'une puce.
<dl>, <dt> et <dd>	L'élément dl définit une liste de définition. De ce fait, dl sera toujours utilisé avec dt, qui définira le terme et dd qui contiendra la définition du terme. Ces éléments sont très utiles si vous avez une liste de mots avec leurs définitions comme dans un dictionnaire.
<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... table définit l'ouverture du tableau, tr indique une ligne, th indique les cellules d'en-tête (dans ce tableau, les en-têtes sont balise et sens sémantique ), et td indique une cellule. Petit rappel pour certains : l'élément caption définit le titre d'un tableau, et doit être absolument imbriqué dans 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>	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 / 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 . Oui, mais par exemple, si 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 (le rabâchage, toujours le rabâchage )
<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 à la 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 ) Et 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. En effet, puisqu'il désigne 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 dis <q>La pratique c'est mieux que la théorie</q> Et enfin, un autre exemple où cite sert à désigner une référence (exemple tiré de la doc HTML) Exemple : pour plus d'informations, voir <cite>[ISO-0000]</cite>. Bien sûr, vous pouvez pointer cette référence vers une autre page avec, tout bêtement, un lien.
<acronym>	L'élément acronym permet de définir des acronymes grâce à l'attribut title (ouah, c'est la réflexion du siècle, là). En fait, je vous dis ça car il y a une différence qu'il faut connaître avec la balise suivante. Un acronyme est un sigle que l'on prononce comme un mot ordinaire tel que ONU, UNESCO, radar, BTS, BEP, etc. Voici un exemple : <p>L'organisation internationale qui siègent à 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 que l'on doit prononcer les lettres une à une. Voici quand même des exemples : WWW, HTTP, SdZ (pour site du zéro ). Comme vous l'aurez remarqué, la différence entre les éléments acronym et abbr est futile, et à la fois cruciale : respectez-la abbr fonctionne comme acronym avec l'attribut title pour renseigner l'abréviation
<sup> et <sub>	Les élément sup et sub servent respectivement à mettre en exposant et en indice. Petit indice mnémotechnique : sup comme supérieur, et sub comme submersible (comme les sous-marins )
<code>	Et enfin, 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, mais surtout assez long, voire très long. Pourtant, je vous assure qu'avec cette liste vous avez appris 90 % des balises XHTML, et surtout les plus utilisées. Pour les curieux, voici quelques éléments à connaître si on souhaite appronfondir ses connaissances.

• kbd
• dfn
• var
• samp

Et voilà un lien vers la spécification HTML du W3C, pour que vous alliez vous-mêmes chercher les définitions.


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 approprié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 !

Fini le temps du design dans le contenu, vive le CSS ! C'est très bien, mais attention aux abus !
En effet, maintenant on est arrivés à 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 le forum du SdZ.
Par exemple, je vois parfois des codes avec : <div class="titre"> pour mettre 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 en 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 ?" 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 .
Donc l'usage des balises <tr>, <td>, etc. pour la mise en page est une infraction aux lois de la sémantique du web.


Pour de plus amples précisions, je vous invite à voir l'excellent post de Deeder sur le forum du Sdz :
Tableaux vs CSS : un combat de chaque instant...
Ou sinon, vous avez ici une comparaison entre l'utilisation des <div> et des tableaux :
Alsacréations : Tableaux ou Div, petite compraraison.

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>... (de même pour les autres balises que nous avons vues plus haut ). Libre à vous après de changer le design du titre avec le CSS, mais, s'il vous plaît, ne faites 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.

Code : HTML

C'est pas très joli, hein . Voici désormais ce que vous devez faire à la place.

Code : HTML
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 un petite expérience, vous ne réfléchirez même plus au choix d'une balise. Cela deviendra un réflexe (comme d'aller sur le SdZ).
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 mise toutes les balises les plus utilisées.


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 Opéra, c'est aussi simple : faites Affichage / Styles / Mode utilisateur, puis décocher 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 .

C'est un petit geste à faire dans vos codes qui peut vous paraitre barbant, mais les avantages sont nombreux comme nous allons le voir tout de suite.

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 :

• 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, comme Google . En effet, une page remplie de <div> parait 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 1^è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 pour le CSS. Un vrai régal
• 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 donc aucun sens pour le navigateur, et la personne sera dans l'impossibilité de visiter votre site : c'est bien triste pour elle .
  Par personne "handicapée" 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 la majeure (tout le CSS ?) partie des styles CSS est ignorée à cause de l'écran trop petit.

Ce n'est bien sûr qu'un résumé des idées principales. C'est pour cela que je rajoute l'adresse d'un article plus complet et fait par des professionnels . Vous y trouverez toute une page qui détaille largement les avantages à 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 (avec que du texte).


Voilà 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 (c'est rare ), je vous invite à visiter un autre site qui dispose de nombreux tutoriels complets, clairs et structurés sur les sujets en rapport avec l'accessibilité web (donc, la sémantique.
Alsacréations : La sémantique


Bon : je sais pas pour vous, mais moi, ça m'a déjà convaincu !
Des réticents pour le respect de la sémantique ? Je m'en occupe !