Les pages web sont rédigées en langage HTML. Ce langage se compose d’éléments, c’est-à-dire des petits bouts de code, qui permettent d’indiquer des parties de la page. Il est essentiel d’utiliser l’appellation html exacte pour définir votre texte. Exemples : un titre, un en-tête, un tableau, une liste auront une appellation différente et précise.
Grâce à l’utilisation des termes exacts, vous augmentez sensiblement l’accessibilité de votre site pour les technologies d’assistance, ainsi que sa visibilité dans les moteurs de recherche car la signification des différents éléments de la page est enregistrée dans le code HTML même.
Comment vous y prendre ?
S’il existe un élément HTML avec la signification que vous voulez transmettre, vous devez utiliser cet élément précis. C’est ce que l’on appelle le balisage sémantique. Certains éléments HTML ont pour but d’indiquer la structure d’une page (les sections, les menus de navigation, les paragraphes...). À côté de cela, il y en a d’autres qui servent à donner une signification à des parties de texte. Par exemple pour insister sur un mot ou un groupe de mots.
Un bon éditeur possède des boutons grâce auxquels un rédacteur peut insérer les éléments HTML adéquats pour un tableau ou un texte mis en évidence (en gras), par exemple.
Exemples
Exemples d’éléments sémantiques:
- <form> : formulaire
- <table> : tableau
- <img> : image
- <header> et <footer> : en haut et en bas d’une page web
- <em> et <strong> : mise en évidence
- <blockquote> : citation
- <ul> et <ol> : liste à puces et liste numérotée
- Les éléments suivants ne sont pas sémantiques. Ils ne disent rien sur leur contenu. Il est préférable de les employer uniquement quand aucun élément sémantique ne peut être utilisé.
- <div>
- <span>
- Le choix des éléments à utiliser dépend de la version HTML sur le site web.
Exemple : un article avec un titre
Tout en haut d’un article se trouve son titre. Celui-ci est affiché dans un plus grand format et en gras. Il peut également avoir une autre couleur que le reste du texte.
- Bonne méthode : le titre est enregistré dans un élément header (<h1>, <h2>, etc.).
- Mauvaise méthode : le titre est enregistré dans un élément de paragraphe avec un attribut de classe (<p class :”titre”>).
Pour les rédacteurs
Le rédacteur doit veiller à utiliser les fonctions de l’éditeur pour insérer des en-têtes, des sections, des listes et des tableaux par exemple afin d’avoir les éléments HTML adéquats.
Pour les développeurs
Le développeur doit s’assurer que l’éditeur dans le CMS permet d’utiliser plusieurs éléments sémantiques.