Vous êtes ici : Accueil > Atelier Webmaster > Cours XHTML/CSS > La sémantique du XHTML

Atelier Webmaster - Cours XHTML/CSS

La sémantique du XHTML

[intro]Dans le Petit Larousse Illustré on peut lire à sémantique : Sémantique : n.f. (du grec semantikos qui signifie) Relatif au sens, à la signification des unités linguistiques. Et, aussi incroyable que cela puisse paraître nous allons parler de sémantique dans ce cours :p

En effet, vous allez vous rendre compte très vite, que pour des contextes différents, on pourrait se servir de la même balise. Dis autrement pour un même contexte on pourrait se servir de différentes balises :D
Prenons un exemple. Si je veux mettre un titre au bloc menu de mon site je pourrai utiliser la balise que l'on a vu au chapitre 2 : <p></p> puisque mon titre est du texte. Mais nous pourrions aussi utiliser la balise <h1> </h1> ou encore la balise <div></div>.
Nous verrons la signification de ces deux balises plus loin.
Le rendu visuel sera similaire (ou presque... La balise <h1></h1> par exemple utilise une taille de police plus grande et une graisse plus épaisse.) de toute façon nous verrons plus loin que, grâce au CSS, nous pourrons le rendre identique.
Alors, me direz-vous : comment choisir entre les différentes balises possibles ? Et, pourquoi utiliser l'une plutôt qu'une autre ?

Il faut savoir que chaque balise a un sens. Une sémantique. Ainsi la balise <p></p> est utilisé pour des paragraphes de textes. La balise <h1></h1> signifie que ce qu'elle entoure est un titre. La balise <div></div> est une balise dites générique (il n'en existe que 2 de cette sorte) puisqu'elle n'a aucun sens sémantique, on l'utilisera donc pour tout ce qui ne doit pas avoir de sens particulier.
Dans toute la suite du chapitre, nous allons étudier la plupart des balises pour comprendre leur sens et leur utilisation. (vous saurez donc faire pas mal de choses en XHTML tout bientôt :)) Mais avant cela, j'insiste : il est très important de respecter la sémantique de chaque balise, de plus c'est à votre bénéfice !
  • En premier lieu, cela permet à vos pages Web d'être plus accessible pour vos visiteurs. Les personnes mal-voyantes ou qui ont des problèmes pour naviguer sur le Web par exemple, peuvent se raccrocher à la sémantique des balises pour comprendre le sens d'un site Web ou pour naviguer sur ce même site. Ceci notamment grâce à l'utilisation de petits logiciels qui interprètent pour eux le sens des balises. Quelques exemples : navigation facile à travers les titres, ou intonations de voix différentes selon la balise avec un lecteur de page Web comme Jaws pour les mal-voyants.
  • En deuxième lieu, cela permet à vos pages Web d'être plus accessible pour les moteurs de recherche. Ils pourront plus facilement accéder à votre site et communiquer des informations plus pertinentes à leurs utilisateurs ! (et vous serez donc mieux positionné dans leurs résultats)
  • Enfin, c'est aussi bien plus lisible et compréhensible pour vous. (ainsi que pour les codeurs qui seraient susceptible de travailler avec vous.)

Cela vous semble peut-être très théorique ce que je vous raconte, mais c'est tout du moins important, car on se laisse vite entrainer à utiliser une mauvaise balise au mauvaise endroit ! C'est, en général en acquérant de l'expérience que l'on se rend compte de la nécessité et du bien fondé de la sémantique... Donc pour éviter d'avoir à recoder votre site proprement, pensez-y tout de suite ;)[/intro][fin]Nous voilà enfin arrivé à la fin de notre voyage au pays de la sémantique XHTML ! Désormais, vous connaissez de nombreuses balises XHTML (presque toutes en fait. Il ne reste plus que des balises bien spécifiques que nous verrons au fil du cours :)) et même s'il vous faudra peut-être revenir souvent sur ce chapitre pour bien l'assimiler, vous avez désormais suffisamment de connaissances pour que l'on puisse aborder le CSS :) (enfin ^^)
Reposez-vous bien, parce qu'au prochain cours c'est un tout nouveau langage et une toute nouvelle manière de penser une manière un peu différente de penser que je vais vous apprendre !

[/fin]