Sémantique HTML et référencement
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, <strong>il donne du sens à la structure de la page</strong>. C'est pour cette raison qu'on parlera de <strong>sémantique structurelle</strong>.
<h4>La sémantique structurelle</h4>
<blockquote>
<p>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.</p>
<p>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.</p>
<p>Source : Académie Française.</p>
</blockquote>
<blockquote>
<p>Structure :</p>
<p>Sens 1 Disposition, agencement des différents éléments d'un ensemble. Ex La structure d'un atome. Synonyme agencement.</p>
<p>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.</p>
<p>Sens 3 Ensemble, système organisé dont les éléments sont dépendants et solidaires entre eux. Ex Une structure municipale.</p>
<p>Source : Académie Française.</p>
</blockquote>
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.
<img src="http://fredericdevillamil.com/semantique-structure.png" class="centered" alt="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".
<h4>La sémantique dans le HTML</h4>
<cite>Une place pour chaque chose, et chaque chose à sa place</cite> 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.
<h5>Inline, block, et comportement à l'affichage</h5>
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 :
<ul>
<li>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 <code>div</code>, et <code>p</code>.</li>
<li>Les éléments de type inline s'affichent les uns à côté des autres, et vont à la ligne à la fin du bloc dans lequel ils sont contenus. Des éléments de type inline répandus sont <code>a</code>, <code>span</code>, <code>strong</code> ou <code>br</code>...</li>
</ul>
Il découle quelques règles simples – quand on a l'habitude – de ce type de comportement :
<ul>
<li>Je peux imbriquer autant d'éléments de type block les uns dans les autres. Pour comprendre ce que cela donne, imaginez-vous des poupées russes les unes dans les autres, c'est exactement ça. Je peux donc mettre des <code>p</code> dans des <code>div</code> (et vice versa).</li>
<li>Je peux imbriquer autant d'éléments de type inline les uns dans les autres. Je peux décider de mettre un <code>a</code> en valeur avec un <code>em</code>.</li>
<li>Je peux imbriquer des éléments inline dans un block. Un <code>p</code> peut contenir autant de <code>a</code> que je le souhaite.</li>
<li>Je ne peux en revanche pas placer d'éléments block dans un élément inline. Je ne peux donc pas mettre de <code>p</code> dans un <code>a</code> 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é <code>display: block</code>.</li>
</ul>
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.
<h5>Structure d'une page</h5>
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, <code>head</code> et <code>body</code>.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Les titres de pages et de partie se placent entre balises H1 à H6, en fonction de l'importance du titre. Pour le titre du site, on utilisera H1, et on n'utilisera qu'un seul H1 dans la page. Pour le sous-titre, pour un meilleur référencement, on utilisera un p stylé plutôt que H2 qu'on réservera au titre de la page.
Exemple :
<h1>Top Santé</h1>
<p>le site de la santé</p>
<h2>arrêter de fumer sans efforts</h2>
<h3>les patches</h3>
<h3>les chewing gum</h3>
<h4>le chewing gum à la menthe</h4>
<h4>le malabar à la fraise</h4>
<h3> le punching ball</h4>
On remarquera que j'utilise plusieurs fois h3 et h4, c'est normal, cela indique que les paragraphes ont la même importance. Seuls H1 et H2 doivent être utilisés une seule fois par page (surtout H1)
Pour un bloc de conteneur, on utilisera une div. Pour un paragraphe de texte, un p.
<div>ceci est un texte</div> est donc incorrect.
<p>ceci est un texte</p> l'est
Et plus généralement, on utilisera des balises de type block pour afficher un bloc (div, p, hx...) et des balises de type inline (span, abbr, em, strong) au sein de texte. Une excepton pour les menus horizontaux pour lesquels on préférera des éléments de type list-style stylés en inline, car les éléments d'un menu, quelle que soit la manière dont ils sont disposés, font en fait partie d'une liste (c'est ça la sémantique).
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.
Pour les listes d'éléments, évidemment, des listes ordonnées ou non en fonction de la liste.
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.