Depuis maintenant trois ou quatre ans, on peut lire jusqu’à plus soif que le web 2.0 a inauguré le règne du contenu, et cette allégation n’est pas complètement fausse. L’auteur d’un site publie un contenu ; les visiteurs y réagissent par des commentaires, des billets liés, du bookmarking social, ou de la mise en avant sur les agrégateur sociaux. Bien que la qualité des contenus promus laisse souvent à désirer – il vaut mieux ne pas trop demander aux gens de réfléchir – le système marche semble fonctionner malgré quelques ratés ici et là. Pourtant, si l’on parle beaucoup du contenu, on en oublie que trop souvent la structure, y compris dans le monde des développeurs web, à l’exception peut-être du web sémantique.
Contrairement à ce que j’ai longtemps cru, le XHTML n’est pas seulement un langage de mise en forme ; par la nature même de chacun de ses éléments, il donne du sens à la structure de la page, et ce sens peut être exploité de bien des manières. C’est pour cette raison que l’on parlera dans la suite de cet article de sémantique structurelle.

La sémantique structurelle

Sémantique : Etude du langage et des signes linguistiques (mots, expressions, phrases) du point de vue du sens (du grec “semantikos”, “qui signifie”). Il s’agit de savoir comment un signe tel que “X” se charge de sens, comment il est utilisé par l’énonciateur, puis perçu et interprété par le co-énonciateur. La sémantique analyse le sens des mots et le processus par lequel ils se chargent de ce sens.

L’étude de la sémantique peut être philosophique (sémantique pure) ou linguistique (sémantique descriptive ou théorique). On y ajoute généralement une troisième approche, la sémantique générative.

Source : Académie Française.

Structure :

Sens 1
Disposition, agencement des différents éléments d’un ensemble. Ex La structure d’un atome. Synonyme agencement.
Sens 2
Organisation des éléments d’un système qui lui donne sa cohérence, sa forme et sa rigidité. Ex La structure d’une entreprise.
Sens 3
Ensemble, système organisé dont les éléments sont dépendants et solidaires entre eux. Ex Une structure municipale.

Source : Académie Française.

La sémantique structurelle est donc le fait de transmettre du sens à la page par sa structure.

À quoi cela sert-il ? À rendre le contenu des ressources du web accessibles et utilisables par des programmes et des agents logiciels, incapables de saisir le sens du contenu créé par l’être humain, et compréhensible par celui-ci.

Opération de compréhension du sens sur le web

Les outils de recherche et de data mining, peuvent reconnaître des mots, des expressions ou d’identifier des schémas plus ou moins complexes (dans le sens de pattern, c’est à dire de formes). Cependant, ils ne sont pas capables à ce jour de dégager le sens contenu dans texte ou une image. On peut toutefois transmettre du sens à travers la structure de la page. Cela va de choses très simples, comme “ceci est un titre de nième niveau”, “ceci est un tableau”, à des choses beaucoup plus complexes comme “ceci est une carte de visite dans laquelle se trouvent mon nom, mon adresse et mon numéro de téléphone”.

La sémantique dans le XHTML

Une place pour chaque chose, et chaque chose à sa place écrivait Samuel Smiles dans Frugalité. Il en va ainsi avec les balises XHTML. Chacune possède son sens propre qui va bien au delà de la simple mise en forme. Dans cette partie, nous allons parler de comportement, de structure et de sens, en mettant ces éléments en rapport avec la compréhension qu’en possèdent les outils de recherche ou de data mining (ce qui revient globalement au même).

Inline, block, et comportement à l’affichage

Même s’il est possible de le changer dans la feuille de style CSS, chaque balise XHTML possède un comportement par défaut, dont les deux principaux sont inline et block, cette liste étant tout sauf exhaustive.

Dans un cadre d’utilisation normale, la différence entre inline et block est simple :

  • Les éléments de type block s’affichent les uns en dessous des autres, quelle que soit leur largeur. Les balises de type block les plus utilisées sont div, et p.
  • Les éléments de type inline s’affichent les uns à côté des autres, et passent à la ligne à la fin du bloc dans lequel ils sont contenus. Les éléments de type inline les plus répandus sont a, span, strong ou br

Il découle quelques règles simples – la simplicité venant avec l’habitude – de ce type de comportement :

  • Je peux imbriquer autant d’éléments de type block que je le souhaite. Pour comprendre ce que cela donne, imaginez-vous le principe des poupées russes. Je peux donc mettre des p dans des div (et vice versa, même si c’est incorrect sémantiquement).
  • Je peux imbriquer autant d’éléments de type inline les uns dans les autres. Je peux décider de mettre un a en valeur avec un em.
  • Je peux imbriquer des éléments inline dans un block. Un p peut contenir autant de a que je le souhaite.
  • Je ne peux en revanche pas placer d’éléments block dans un élément inline. Je ne peux donc pas mettre de p dans un a pour profiter de l’affichage de mon lien en block. Je peux en revanche modifier le comportement de mon lien en CSS avec la propriété display: block.

Ces règles sont censées être connues de tout développeur XHTML, je me permet cependant de les rappeler car elles participent au sens donné à ma structure.

Structure d’une page web

Quand vous prenez un livre, vous vous attendez à y retrouver une certaine structure logique : à moins de prendre un manga, jamais vous ne verriez la quatrième de couverture à la place de la première, vous allez spontanément au début pour trouver les mentions légales et à la fin pour consulter la table des matières. Sinon, ça n’a pas de sens. C’est exactement pareil avec une page XHTML.

La structure réelle de la page XHTML tient plus du corps humain : difficile d’imaginer une tête sans corps, difficile également d’imaginer un corps sans tête. C’est d’ailleurs pour cette raison que la page XHTML est divisée en deux parties, head et body, tête et corps. Les informations contenues dans l’en-tête n’apparaissent pas directement à l’écran, mais elles conditionnent le comportement du corps, exactement comme dans la vie. Personne ne peut dire ce que vous avez dans la tête (à moins d’une bonne trépanation qui ne montre pas tout), mais votre mental conditionne largement votre comportement corporel.

Les bonnes pratiques

Titres et tagline

Placez le titre du site, des pages, parties et sous-parties dans les balises h1 à h6, toujours en fonction de l’importance du titre, puis, appliquez le style désiré à cette balise.

La balise h1 s’utilise pour le titre du site, et, pour des raisons de référencement, ne placez qu’une seule balise de ce type par page. Choisissez h2 pour le titre de la page en cours, puis h3, h4, h5 et h6 à mesure que vous vous enfoncez dans la hiérarchie.

Pendant très longtemps, j’ai fait l’erreur – relativement commune – d’encadrer ma tagline dans la balise h2. Ceci est à la fois pénalisante du point de vue du référencement, et incorrect sémantiquement. Bien qu’appelée sous-titre, peut-être par abus de langage, une tagline ne rentre pas dans la hiérarchie de la structure de la page.

Un exemple de bonne utilisation des titres trouvé sur une page personnelle des années 90 :

<h1>Ah mon beau site</h1>
<p>Mon super site de la mort</p>
  <h2>Bienvenue sur mon super site</h2>
    <h3>Les photos</h3>
      <h4>Mes super potes</h4>
      <h4>Mon chat</h4>
    <h3>Mon livre d'or</h3>
      <h4>Signez mon livre d'or</h4>
      <h4>Les derniers messages</h4>

Dans notre exemple, j’utilise h3 et h4 à plusieurs reprises. Ce n’est pas par hasard ; ces balises déterminent les en-têtes des grandes parties de mon contenu et indiquent également une position dans l’ordre hiérarchique. La sémantique de mon XHTML se retrouve donc dans le sens que le visiteur perçoit sur la page. Les outils de recherche et les êtres humains le perçoivent donc de la même manière.

Blocs et paragraphes

Les deux balises de type bloc les plus utilisées sont div et p.

Voyez Div comme un conteneur, une caisse de déménageur faite pour structurer la page, dans laquelle vous mettrez le véritable contenu : des paragraphes de texte, des images, des listes…

p délimite un paragraphe de texte, dans lequel on va pouvoir placer des éléments de type inline. Une imbrication de p dans une div est donc sémantiquement correcte, tandis que le contraire ne l’est pas. De même, on évitera de mettre directement le texte dans une div, même si ça valide et que cela semble mieux d’un point de vue esthétique. Il existe certainement un meilleur élément imbriquant.

Le code suivant a du sens :

<div>
  <p>Mon texte</p>
</div>

Le code suivant n’en a pas :

<p>
  <div>Mon texte</div>
</p>

<div>Mon texte</div>
Listes et menus

Il existe à ce jour trois sortes de listes, chacune ayant une signification différente.

  • Les listes non ordonnées de type ul.
  • Les listes ordonnées de type ol.
  • Les listes de définitions de type dl.

Les listes de type ul conviennent dans le cas de listes d’objets n’ayant pas de rapport ordonné entre eux. On les utilise très souvent pour les menus, qui ne sont finalement que des listes (imbriquées ou non) d’éléments. Leur utilisation dans ce cas précis est donc tout à fait correcte.

<ul>
  <li>Des pommes</li>
  <li>Des poires</li>
  <li>Des scoubidous</li>
</ul>

Les listes de type ol sont à utiliser quand l’ordre dans lequel les items sont affichés revêt une importance quelconque, par exemple dans une liste de tâches à effectuer dans un ordre précis.

<ol>
  <li>Épluchez les carottes et découpez les en petits dés.</li>
  <li>Faites fondre la graisse d'oie dans une poile à frire.</li>
  <li>Mettez les carottes à revenir avec des oignons émincés ou des échalottes.</li>
</ol>

Les listes de type dl sont un peu spéciales, et s’utilisent afin d’afficher des termes et leur définition.

<dl>
  <dt>Chien</dt>
  <dd>Animal à 4 pattes bien pratique quand on n'aime pas ce qu'on a dans son assiette.</dd>
  <dt>Chat</dt>
  <dd>Truc plein de poils qui fait un joli bruit quand on shoot dedans.</dd>
  <dt>Perroquet</dt>
  <dd>Animal bien pratique pour remplacer sa femme quand elle est partie.</dd>
</dl>

Il n’existe pas à ce jour de balise d’en-tête spécifiques aux listes, comme il existe title pour les tableaux. Cela rend donc l’attribution d’un titre à une liste délicat d’un point de vue sémantique. Utiliser un h n’est pas correct, dans le sens où il n’est pas lié à la liste, pas plus que ne le serait l’utilisation de listes imbriquées. Le débat est ouvert depuis plusieurs années, et je ne suis pas certain qu’il soit clôt à ce jour.

Formulaires

La logique sémantique d’un formulaire est relativement simple. Des champs, nommément désignés par des libellés sont regroupés au sein d’un ensemble auquel on applique une légende. Cette légende s’applique à l’ensemble des champs contenus dans l’ensemble, et il est possible d’y avoir plusieurs ensemble au sein d’un même formulaire.

Bien que l’utilisation du fieldset ne soit pas obligatoire, il permet cependant de qualifier un formulaire, puisqu’il n’existe pas à ce jour d’équivalent à title pour un formulaire.

<form action="foo" method="post">
  <fieldset>
    <legend>Contact</legend>
    <label for="nom">Nom :</label>
    <input type="text" name="nom" />
    <label for="prenom">Prénom :</label>
    <input type="text" name="prenom" />
    ...
    </fieldset>
</form>
Mise en valeur d’un texte

Quand nous parlons de mise en valeur, nous parlons bien de sémantique et non de présentation, celle-ci étant déportée dans la feuille de style. Ceci permet, en théorie, de pouvoir refondre un site sans toucher aux balises, et donc à la sémantique de son XHTML.

Les deux balises permettant de mettre du texte en valeur sont strong et em. Outre leur différence de présentation, la première affiche par défaut du texte en gras, la seconde en italique, ces deux balises ont une différence sur le plan sémantique. em indique une emphase, strong indique une emphase forte.

Les balises strong et em en XHTML sont très différentes des balises b et i du XHTML. Bien qu’elles ressortent apparemment de la même manière, les dernières ont une vocation de mise en forme et non de sémantique. Ce point est important, et explique en partie la disparition de la balise u en XHTML, que l’ont remplace par un text-decoration : underline dans la feuille de style.

Conclusion

Si vous êtes arrivé au bout de cet article, bravo ! je le considère pourtant comme incomplet, puisque j’ai le sentiment d’avoir oublié plein de choses. Je les ajouterai certainement au fur et à mesure.

Nous avons vu la sémantique appliquée à la structure de la page, mais cela ne nous permet pas d’indiquer le sens du contenu aux outils de data mining. La solution à cette omission réside dans l’ajout de métadonnées dans le XHTML permettant d’indiquer de manière universelle de quoi on parle. Plusieurs projets sont actuellement en cours afin de mettre une identification des schémas plus efficaces. Parmi eux, on peut citer RDFA ou les Microformats.

dans les entrailles de la tour eiffel

Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: