Balises HTML : le guide ultime pour bien les comprendre et bien les utiliser en rédaction web

Vous serez amené, en exerçant en tant que rédacteur web, à utiliser les balises HTML. 

Pas de panique si ce terme ne vous évoque rien pour le moment, nous allons voir ce qu’est le langage HTML puis les principales balises utiles en rédaction web.

Lisez bien ce qui suit et dites-moi en commentaires si tout est clair pour vous à la fin de l’article ! 

Le langage HTML, qu’est-ce que c’est ?

Le langage HTML (Hyper Text Markup Language pour votre culture personnelle) est un langage informatique qui est utilisé afin de structurer des pages web. 

Les balises vont ainsi aider les moteurs de recherches qui scannent la multitude de sites internet à “lire” les pages.

Le plus souvent, les balises HTML encadrent le contenu à l’aide d’une balise ouvrante et d’une balise fermante.

Un exemple avec le titre de premier niveau, connu comme “le H1” de votre texte : <H1>Mon titre de premier niveau</H1>. 

En tant que rédacteur web, vous n’avez pas besoin de savoir écrire des lignes entières de code en HTML. Néanmoins, pour correctement analyser, écrire et optimiser un contenu, vous devez être familier avec certaines de ces balises HTML.

Comme dit précédemment, le balisage HTML est extrêmement important pour la lecture des moteurs de recherche. Si la page n’est pas correctement structurée, ce n’est pas optimal pour eux et ils préfèrent passer à un autre site ! Ce qui peut donc potentiellement vous poser un problème de référencement mais aussi d’indexation… Ce qui serait bien dommage ! 

De plus, les clients demandent souvent que les textes soient balisés. C’est pour eux un gain de temps considérable mais aussi la certitude que l’article que vous leur livrez sera correctement rédigé, indexé et optimisé pour le référencement naturel.

Les balises HTML à connaître en rédaction web

Balises HTML de titres 

<h1> Titre de niveau 1

<h2> Titre de niveau 2

<h3> Titre de niveau 3

<h4> Titre de niveau 4

<h5> Titre de niveau 5

<h6> Titre de niveau 6

Une page web ne doit toujours contenir qu’un seul H1. Il compte beaucoup en SEO, il doit donc contenir le mot-clé principal.

Il est également important que les balises de titres se suivent de manière logique : un H3 ne peut pas suivre un H1, il faudra y intercaler un H2.

Il est recommandé d’éviter les balises de titres isolées. Si vous insérez des sous-titres dans des paragraphes, il faudra y placer au moins deux titres du niveau inférieur. Par exemple, sous un H2, il y a deux titres H3 au minimum.

Lors de la rédaction d’un article, vous utiliserez régulièrement les H1, H2, H3 voire H4 mais c’est assez rare d’aller plus loin.

Pour exemple, voici le plan de mon article où je vous présente les outils indispensables et gratuits que j’utilise en tant que rédactrice web, que vous pouvez (re)lire ici : 

Tous les logiciels de traitement de texte, de même que les éditeurs WordPress, offrent la possibilité de choisir vos titres lors de la rédaction de vos articles de manière très simple.

Balises HTML de mise en page 

Pour indiquer aux robots qui explorent le web les mots ou expressions importantes dans votre texte, utilisez des balises HTML pour mettre en page vos articles. Cela permet aussi aux navigateurs de savoir comment afficher votre page. 

De plus, cela facilite la lecture de votre audience, un objectif qu’il ne faut pas perdre de vue : vous écrivez avant tout pour des êtres humains et non pour des robots.

Les balises sémantiques

• <strong> est une balise sémantique qui montre qu’un mot ou qu’une une expression est de haute importance. Par défaut, le contenu qu’elle encadre est mis en gras.
• <em> : elle va signifier que le contenu qu’elle encadre est important. Cette balise permet, par défaut, de mettre un mot-clé ou une expression-clé en italique. 

Il faut utiliser ces balises avec parcimonie. Elles doivent encadrer un contenu qui fait partie du champ sémantique (ou champ lexical) du mot-clé principal de la page. Et, si trop d’éléments sont en gras dans votre texte, vous risquez de perdre votre lecteur, qui pourrait être confus.

Les balises de style

• La balise <b> met des mots et expressions en gras.
• De même, la balise <i> met juste des mots et expressions en italique.

Elles n’ont donc qu’un effet de style, pour agrémenter la lecture, sans indiquer une quelconque importance du contenu.

Les balises de liste

<ul> permet d’afficher des listes à puces non numérotées, qui sont particulièrement appréciées des moteurs de recherche. N’hésitez pas à les utiliser à la place de phrases un peu longues d’énumérations. 

Balises de métadonnées

Les métadonnées sont insérées dans des balises <meta>. Les métadonnées regroupent le méta-titre, la méta-description et l’URL.

Le méta titre <meta title> est le nom de la page web, qui apparaît sur l’onglet de navigation mais aussi sur la page de résultats de recherche. Il peut être différent du H1 mais doit, lui aussi, contenir le mot-clé principal, si possible dès le début du titre.

D’une longueur de 50 à 70 caractères, espaces inclus, c’est sur lui que va cliquer l’internaute, depuis la page de résultats de recherche.

La méta description <meta description> a également beaucoup d’importance. C’est le petit texte qui figure, dans la page de résultats de recherche uniquement, sous le méta-titre et l’URL. Elle doit contenir entre 155 et 160 caractères. Elle est aussi attractive pour inciter l’internaute à visiter votre site. Découvrez toutes mes astuces pour l’optimiser juste ici.

Quant à l’URL, <meta url>, elle ne doit contenir pas d’underscore car ils sont mal lus par les navigateurs, il faut seulement utiliser des traits d’union (-). 

A retenir : les métadonnées doivent contenir votre mot-clé principal. 

(D’autres conseils sont disponibles dans mon ebook téléchargeable gratuitement 😉 ce serait bête de ne pas en profiter !)

Pour insérer facilement vos méta-données lors de la publication d’un texte sur WordPress, utilisez tout simplement des plugins SEO, comme Yoast SEO, un des plus connus de l’univers WordPress, ou Rank Math SEO.

Voici les principales balises HTML dont vous aurez besoin en tant que rédacteur web. Donc rien de bien méchant finalement, j’espère que vous êtes plus sereins ! 

Si vous avez encore des questions, posez-les moi dans les commentaires ! Ça me fera plaisir de vous répondre, comme d’habitude 😉