De l’intérêt de bien baliser son contenu

Ça s’appelle le HTML sémantique.

Je t’entends déjà gueuler comme un veau que t’es pas codeur/euse et que vazy, t’as fait un Bac L, t’es nul/le en maths, ça te saoule d’avance. Faut pas s’inquiéter puisque depuis moult années maintenant, les systèmes de rédaction des blog offrent des moyens super simples pour permettre à des non-codeurs/euses de bien baliser leur texte pour les internets.

Oui, si tu as déjà écrit dans un blog, tu as déjà utilisé, peut-être sans le savoir, du HTML !

A partir du moment où tu fais la différence entre un titre et un texte, le reste n’est pas très compliqué. Mais bien entendu, pour bien baliser son contenu, il y a quelques règles à suivre. (Ici, on va en voir quelques unes, pas toutes, sinon on y est encore demain)

Utiliser les bonnes balises de titre !

hierarchie_titre_editeurLà, tu vois par exemple le titre du blog, c’est Hashtag Social Media. C’est donc le titre principal. Normalement, y’en a qu’un sur tout le site et en théorie, s’il s’affiche en tant que titre sur les pages du blog, on ne le verra qu’une seule fois. Donc on pourrait en conclure qu’un titre principal, sur une page, il n’y ait qu’une seule fois.
En HTML, cela fait référence à la balise <h1>. Grâce à cette balise, les moteurs de recherche et autres robots inspectant le web (pour le référencement toussa) savent que ce qui se trouvent entre cette balise est le titre principal du site / blog / application.

Ensuite, il y a les autres titres : les titres des sections, des articles, les sous-titres, les sous-sous-titres,… Ceux-là seront codés avec les autres balises de titre <h2>, <h3>, <h4>,… Et on pourra en mettre plusieurs par page.

Là, tu me dis « Mais c’est quoi ces h numéro machin ? ». Bonne question. Tu auras noté que la balise HTML pour le titre principal c’est <h1>, bah ensuite, y’a une hiérarchie. Comme quand tu faisais des dissertations à l’école :

Mettre du gras et de l’italique…

Sur les éditeurs de texte, en plus de pouvoir choisir les niveaux de titre, on peut customiser son texte en y mettant du gras ou de l’italique. Attention, ces fonctions ne sont pas (seulement) là pour faire joli ! Le gras va servir à mettre en valeur quelque chose d’important, qui doit ressortir et attirer l’œil du lecteur. Ça peut être des mots clefs, des notions essentielles ou des phrases qui font office de résumé du paragraphe en lui-même (une sorte de TL;DR).

… pour faire des citations

t’as vu comment j’ai grugé, j’ai pas parlé de l’italique avant de passer à ce paragraphe. Et pour une bonne raison.

En général, on va utiliser l’italique pour des citations (de gens connus) ou des paroles rapportées (de gens pas connus). Mais comment faire pour baliser correctement une citation ? On utilisera la balise <blockquote>. Et on utilisera la balise <cite> pour mettre en avant la source de la citation.

Souvent, on mettra le contenu de la citation (ce qui se trouvera entre les balises blockquote) en italique. Pour faire en sorte que toutes tes balises soient en italique, au lieu de sélectionner une par une tes citations et de devoir cliquer sur le bouton [italique] de ton éditeur de texte, tu peux assigner une propriété CSS à tes blockquote de sorte qu’elles soient toutes en italique.
Si ce que je te raconte, c’est du chinois, soit tu peux voir avec un collègue/ami pour qu’il t’explique, soit chercher un tuto sur internet pour trouver comment attribuer une propriété CSS à un élément HTML.

Si tu t’y connais un peu en CSS

Bien baliser son site / blog / application / autre, ça va te permettre d’attribuer un style graphique à chaque élément et de conserver une cohérence graphique tout partout. En effet, quand tu vas créer ou modifier la feuille CSS de ton site, tu n’auras qu’à cibler l’élément à customiser et lui attribuer une propriété CSS et PAF ! Tous les éléments correspondants sur tout ton site seront modifiés sans que tu n’aies à les modifier un à un manuellement, avec les boutons de ton éditeur de texte. (et ça, c’est vraiment magique)

TL;DR

On va bien baliser son contenu avec les bonnes balises HTML car :

  • les moteurs de recherches vont mieux analyser et identifier ton site ou ton blog. S’ils savent à quoi sert ton site et comment il s’appelle, c’est toujours plus pratique pour une bonne indexation, un meilleur référencement, n’est-ce pas ?
  • ça te permet de garder une cohérence graphique sur tout ton site et ainsi tes lecteurs identifieront plus facilement les différents éléments de ton site (un bouton est différent d’un titre donc on ne va pas les représenter de la même manière)

Ressources ou trucs à lire

  • Le point sur la sémantique via Alsacreation
  • Validateur W3C : un bon outil qui va hurler si tu utilises les mauvaises balises et te fileras des conseils. (le W3C c’est un peu l’organisme qui dit ce qui est caca et ce qui est bien en terme de code sur les Internets)

Une réflexion sur “De l’intérêt de bien baliser son contenu

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.