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

code html

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>. 

comment utiliser les balises html en redaction web

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

plan d'un article bien structure avec les titres hn
Vue d’ensemble possible grâce à l’extension Google Chrome “Web Developer”

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.

mise en page des balises html de titres avec wordpress et google docs

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 sont 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.

les metadonnees contiennent les balises html de titre, description et url
L’éditeur de métadonnées du plugin Yoast SEO

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.

modification des metadonnees sur yoast seo de wordpress
Modification des métadonnées avec le plugin Yoast 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 😉 

Partager :

16 commentaires

  1. Intéressant
    Merci pour le partage
    😊

    1. Merci pour ton commentaire, ravie que ça t’ait plu ! A bientôt 😉

  2. Merci pour cet article très clair 🙂 !

    1. Merci pour ton retour Marion 🙂

  3. Damien Renneville a dit :

    Merci pour cet article complet et simple Charlotte,

    Il va à l’essentiel et c’est ce que j’ai apprécié

    Amicalement

    Damien

    1. Merci Damien pour ton retour, je suis ravie de voir que l’article t’a plu ! À bientôt 🙂

  4. crea-redac' a dit :

    Merci pour ce rappel qui servira à beaucoup ! Une question me taraude quand même… Pourquoi limiter les balises h3 aux seules énumérations ?

    1. Merci pour ta question Julia. Effectivement, je n’ai pas été très claire et tu fais bien de le relever : les balises h3 ne sont pas limitées aux énumérations. Je voulais souligner le fait que le nombre de balises de titres de niveau inférieur doivent être au moins égal à 2. Ce qui peut servir pour des énumérations, comme dans l’exemple que j’ai utilisé 🙂 je vais revoir la tournure de ma phrase pour plus de clarté !

  5. Merci Charlotte pour cet article très utile !
    Petite question : comment doit-on articuler les balises pour écrire à la fois en gras et italique par exemple ou encore un H1 en italique ?
    Merci

    1. Très contente que l’article te plaise Val, merci pour ton passage !
      Concernant ta question : je te déconseille d’utiliser les balises strong ou em dans les titres car cela serait un peu contre-productif. Les titres signalent déjà aux moteurs de recherche du contenu important et, si tu ajoutes ces balises sémantiques, tu risques de les perturber. Mais tu as 3 solutions pour mettre tes titres en gras et/ou en italique : en utilisant les balises de style b ou i; en personnalisant ton thème (quand cela est possible) ou encore en modifiant directement le CSS de la page !
      J’espère t’avoir aidée avec ces précisions. A bientôt 🙂

  6. Vincent a dit :

    Merci Charlotte pour cet article au top qui résume bien les choses. Pour la mise en gras j’utilise la balise strong personnellement et je fais une règle css précisant que strong = gras car j’avais vu sur le site du zéro que la balise b était dépréciée par les navigateurs. Quel est ton point de vu à ce sujet ?

    1. Effectivement ces deux balises ne sont pas interprétées de la même façon par les moteurs de recherche : la balise strong permet une mise en avant du contenu, pour montrer qu’il est important, alors que la balise b met simplement en gras. La balise b n’a pas d’impact sur le référencement naturel !
      Merci pour ton retour en tous cas et à bientôt 😉

  7. Bonjour Charlotte ! Super article récap. Je suis sûre que ton article gagnerait à être transformé en infographie sur les réseaux sociaux, et notamment Pinterest et Facebook. Bien à toi.

    1. Hello Mélissa, merci beaucoup pour cette super idée ! Je vais me pencher là-dessus 😉 à bientôt !

  8. Maëva a dit :

    Article super intéressant et vraiment bien expliqué. C’est pas la partie la plus simple à comprendre de la rédaction web mais tu l’expliques très bien.

    1. Merci beaucoup pour ton retour ! Effectivement, le balisage HTML est un sacré morceau en rédaction web, je suis contente de savoir que l’article est accessible et compréhensible 🙂

Laisser un commentaire