Sémantique HTML et bonnes pratiques Cela fait plusieurs années que je lis un peu partout que le web 2.0 a marqué l'avènement du règne du contenu. L'auteur du site publie un contenu auquel les visiteurs réagissent par des commentaires, des billets liés, du bookmarking social, ou de la mise en avant sur les Digg like. Si la qualité des contenus mis en avant laisse souvent à désirer – il vaut mieux ne pas trop demander aux gens de réfléchir – le système marche bon an mal an depuis trois ou quatre ans. Malheureusement, si on parle beaucoup du contenu, on a un peu tendance à oublier la structure, y compris dans le monde des développeurs web, en dehors du milieu un peu trop restreint des adeptes du web sémantique. Contrairement à ce que j'ai longtemps cru, le (X)HTML n'est pas seulement un traitement de textes destiné à mettre du contenu en forme ; par la nature même de chacun de ses éléments, il donne du sens à la structure de la page. C'est pour cette raison qu'on parlera 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 donner 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 la sémantique du contenu. Opération de compréhension du sens sur le web Les outils de recherche et de data mining, s'ils sont capables de 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), ne sont pas capables aujourd'hui de dégager du sens d'un texte ou d'une image. Il est cependant possible de transmettre du sens dans la structure de la page. Cela va de choses très simples, comme "ceci est un titre, ceci est un tableau", à des choses beaucoup plus complexes comme "ceci est une carte de visite dans laquelle se trouve mon nom, mon adresse et mon numéro de téléphone".

La sémantique dans le HTML

Une place pour chaque chose, et chaque chose à sa place disait Samuel Smiles dans Frugalité. Il en va ainsi des balises HTML, chacune ayant son sens propre au delà de la simple présentation. Dans cette partie, nous allons parler de comportement, de structure et de sens, en mettant tout cela en rapport avec la compréhension qu'en ont les outils de recherche.
Inline, block, et comportement à l'affichage
Même s'il est possible de le changer dans la feuille de style CSS, chaque balise HTML possède un comportement par défaut, dont les deux principaux sont inline et block, même si cette liste est loin d'être exhaustive. Dans un cadre d'utilisation normale, la différence entre inline et block est simple : Il découle quelques règles simples – quand on a l'habitude – de ce type de comportement : Ces règles sont censées être connues de tout développeur HTML, je me permet cependant de les rappeler car elles participent au sens donné à ma structure.
Structure d'une page
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, et 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 HTML. La structure réelle de la page HTML 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 HTML est divisée en deux parties, head et body. Les informations contenues dans l'en-tête ne sont pas directement apparentes, mais 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 et encore ça ne montre pas tout), mais cela conditionne largement votre comportement corporel.

Les bonnes pratiques

Titres et tagline
Placez vos titres de pages, de parties et de 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. Pendant très longtemps, j'ai placé ma tagline dans la balise h2. C'est en fait une erreur communément rencontrée, pénalisante du point de vue référencement, et incorrecte sémantiquement. Bien qu'appelée sous-titre, peut-être à tort, 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 :

Ah mon beau site

Mon super site de la mort

Bienvenue sur mon super site

Les photos

Mes super potes

Mon chat

Mon livre d'or

Signez mon livre d'or

Les derniers messages

 Dans notre exemple, j'utilise h3 et h4 à plusieurs reprises. Ce n'est pas par hasard, puisque ces balises déterminent les en-têtes des grandes parties de mon contenu. Elles indiquent également une position dans l'ordre hiérarchique. La sémantique de mon HTML se retrouve 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 :

Mon texte

 Le code suivant n'en a pas :

Mon texte

Mon texte
Listes et menus
Il existe à ce jour trois sortes de listes, chacune ayant une signification différente. 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. 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.
  1. Épluchez les carottes et découpez les en petits dés.
  2. Faites fondre la graisse d'oie dans une poile à frire.
  3. Mettez les carottes à revenir avec des oignons émincés ou des échalottes.
 Les listes de type dl sont un peu spéciales, et s'utilisent afin d'afficher des termes et leur définition.
Chien
Animal à 4 pattes bien pratique quand on n'aime pas ce qu'on a dans son assiette.
Chat
Truc plein de poils qui fait un joli bruit quand on shoot dedans.
Perroquet
Animal bien pratique pour remplacer sa femme quand elle est partie.
 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
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ TODO : – Formulaires – Mise en valeur de texte Pour mettre un morceau de texte en valeur, on utilisera strong ou em (emphase), éventuellement stylés, à un p ou un span stylé. En effet, Google est sensible à la mise en valeur par strong et em. Là aussi il y a une question de sémantique structurelle. em plus faible que strong Et pour les éléments genre feuille de calcul ou tableau de données, un tableau. Car, contrairement à une croyance couramment répandue, utiliser des tableaux n'est pas mal si c'est fait à bon escient.