Publié le 14 mai 2024
Les balises HTML font peur à beaucoup de rédacteurs débutants. Pourtant, pour bien écrire sur le web, il suffit d’en connaître une dizaine : le title et la méta description, qui s’affichent dans Google, puis le H1, les intertitres H2-H3, les listes, le gras, l’italique et l’attribut alt des images. Voici à quoi sert chacune, comment l’écrire, et les idées reçues à oublier.
Les points clés
01
Une dizaine de balises suffit
Le minimum à connaître pour bien écrire sur le web.
02
Title et méta description
Ce qui s’affiche dans les résultats de Google.
03
H1, H2, H3
La structure de la page, pour le lecteur et les moteurs.
04
Liens et images
Des ancres explicites et un texte alternatif utile.
Pas besoin de savoir coder : la plupart des CMS posent les balises pour vous. En revanche, connaître leur nom et leur rôle vous évite des erreurs de structure et facilite vos échanges avec un développeur ou un consultant SEO.
Vous préférez confier vos contenus à des rédacteurs qui maîtrisent déjà ces règles ? Découvrez notre agence de rédaction SEO.
En quelques mots, une balise HTML (HyperText Markup Language) est un élément de code inséré dans un texte sur le Web. Son usage est fondamental, car elle fait office de colonne vertébrale en structurant les pages et les contenus qui sont publiés en ligne.
Il existe plusieurs balises HTML et chacune d’entre elles possède une utilisation qui lui est propre. Leur seul point commun réside dans leur code de construction :
Pour mieux comprendre, voici un exemple de balise HTML avec le titre de l’article que vous êtes en train de lire. Tout d’abord, notez que dans le lexique HTML, le titre principal se nomme H1 (le H symbolise le heading et le numéro représente son niveau dans la hiérarchisation d’un texte). Avec cette précision, retenez que le titre de cet article est : Balise HTML et rédaction web : tout comprendre au langage numérique.
Adapté en langage HTML, cela se présente sous cette forme : <h1>balise HTML et rédaction web : tout comprendre au langage numérique</h1>.
Véritables éléments dédiés à la rédaction web, les balises HTML ont pour mission de structurer un contenu ou une page web dans l’unique objectif de permettre aux internautes de naviguer sans difficulté sur vos contenus.
Lorsqu’un rédacteur web rédige une page ou simplement un article de blog, il mettra un point d’honneur à soigner l’agencement et la hiérarchisation des textes. Cette structure aide d’abord les lecteurs, qui parcourent la page en diagonale, et les personnes qui utilisent un lecteur d’écran. Elle aide aussi les robots de Google ou de Bing à comprendre de quoi parle chaque partie de la page.
Si vous manquez de temps pour structurer et optimiser vos pages, notre équipe s’occupe de la rédaction et de l’optimisation SEO de vos contenus, jusqu’à leur mise en ligne.
Si vous gérez un site, il y a de fortes chances qu’il tourne sous WordPress : selon W3Techs, le CMS équipe 39,5 % de l’ensemble des sites web en novembre 2026, loin devant Shopify (5,3 %) et Wix (4,2 %). Ces outils génèrent automatiquement le code HTML : quand vous choisissez « Titre 2 », mettez un mot en gras ou créez une liste à puces, la balise correspondante est posée sans que vous écriviez une ligne de code.
C’est la même chose sur Wix, Shopify, HubSpot ou Drupal. Votre travail n’est donc pas d’écrire les balises, mais de choisir les bonnes : un seul H1, des intertitres dans l’ordre, un gras réservé à l’essentiel, un texte alternatif pour chaque image utile. Voici les balises à connaître.
Indispensables pour le référencement naturel d’un site web, les balises HTML ont tout d’abord des conséquences importantes sur la structure d’un contenu ou d’une page. Lorsque l’on parle de balises HTML on page, celles-ci sont majoritairement liées à la mise en forme des blocs de texte, des titres et des images.
Comme expliqué précédemment, la balise H1, codée <h1>, symbolise le titre principal d’un article ou du contenu d’une page. Son influence sur le SEO d’une page est considérable. Voici quelques conseils pour optimiser votre balise H1 :
Quelques exemples de balises H1 codées en langage HTML :
Une page n’a en principe qu’un seul H1. Retenez que la balise H1 doit être votre priorité lorsque vous rédigez un article ou une page. Il s’agit du premier élément qu’un lecteur aperçoit et il détermine si l’internaute reste sur votre page.
Ces balises segmentent le contenu. En clair, elles agissent comme des sous-titres hiérarchisés selon leur numéro qui indiquent l’importance de la balise. Les H2 sont les seconds titres les plus importants d’un contenu, car ils représentent les différentes rubriques que comportent des pages de site ou bien des articles. Au sein des H2 se trouvent les autres balises allant de H3 à H5 qui composent les sous parties.
Notez bien ceci : le H2 comporte des H3 qui comportent des H4 dont eux-mêmes ont la possibilité de comporter des H5. Il n’est pas systématique d’ajouter des H3 dans un H2, mais, si vous le faites, la bonne pratique éditoriale veut qu’on en mette au moins deux (une seule sous-partie n’a pas de sens) et qu’on ne saute pas de niveau (pas de H4 directement sous un H2). Précision utile : Google indique dans son guide de démarrage SEO que l’ordre des titres compte surtout pour l’accessibilité, pas pour le classement. Une hiérarchie propre sert donc d’abord vos lecteurs.
Quelques exemples de balises de textes codées en langage HTML :
Cette structure ne garantit pas une première place sur Google, mais elle rend la page plus lisible et aide les moteurs comme les IA à en extraire les bonnes réponses.
Rentrons dans un côté plus technique du langage HTML avec le codage des listes à puces. De la même manière que pour les balises Hn, il faut utiliser la construction suivante : <li>texte</li>. De plus, l’ensemble de la liste à puces doit elle aussi être comprise dans un codage qui est le suivant : <ul>liste à puces</ul>
Voici un exemple de liste à puces :
Les meilleurs outils SEO :
<ul>
</ul>
Comme clairement énoncé, la balise strong intervient pour mettre en mot en gras. La mise en forme de mots en gras apporte un avantage notable pour les lecteurs, car les mots les plus importants ressortent du texte. Pour les moteurs, son effet est marginal : utilisez-le pour le lecteur, avec parcimonie.
Exemples de mots en gras codés avec la balise strong :
Pour insister sur un mot, on utilise la balise <em> (emphase), qui s’affiche en italique. Pour un titre d’œuvre ou un terme d’une autre langue, sans idée d’insistance, la balise <i> convient. La documentation MDN détaille la différence entre les deux.
Exemple d’une citation codée en italique : Jean-Paul Sartre a écrit que <em>l’existence précède l’essence</em>.
Une image s’insère avec la balise <img>. L’attribut alt décrit l’image pour les personnes malvoyantes et pour les moteurs de recherche. Construction : <img src="adresse-de-l-image.jpg" alt="description de l’image">
Exemple : <img src="champ-de-fleurs.jpg" alt="Champ de coquelicots au lever du soleil">. Décrivez ce que montre l’image, en une phrase courte, sans empiler de mots-clés.
Après l’étude des balises présentes dans un contenu, passons à celles qui apparaissent dans les résultats de recherche et qui incitent un internaute à cliquer sur votre lien. Les balises off page les plus utilisées par un rédacteur web sont le Title et la méta description. Elles se placent dans l’en-tête de la page (<head>) et ne s’affichent pas dans le corps du texte.
Concrètement, le Title (à ne pas confondre avec le H1) est un lien cliquable en bleu qui se trouve sur la SERP. Sa position dans les moteurs de recherche est régie par les exigences de ces derniers. Les moteurs affichent un contenu selon son degré d’optimisation et de pertinence pour les internautes.
Pour créer un Title, celui-ci doit évidemment correspondre au contenu de la page ou de l’article dont le lien redirige l’internaute, et il peut être proche du H1, voire identique. Google ne fixe pas de limite de caractères : il tronque l’affichage selon la largeur de l’écran, d’où la règle pratique de 60 caractères environ pour que le titre s’affiche en entier. Il peut aussi réécrire un title qu’il juge peu pertinent, comme l’explique sa documentation sur les liens de titre. Il doit également contenir les mots-clés principaux du contenu, identifiés en amont par une recherche de mots-clés efficace.
Exemple d’une balise Title en langage HTML :
<title>qu’est-ce qu’un audit sémantique ?</title>
En effet, placer les bons mots-clés dans vos contenus ne s'arrête pas au corps du texte : l'optimisation SEO des balises HTML est une source précieuse de référencement naturel !
La méta description est le petit texte qui accompagne le Title dans les résultats de recherche. Ce texte apporte les informations essentielles du contenu afin d’inciter l’internaute au clic. Là encore, pas de limite officielle : Google tronque selon l’écran et peut choisir un autre extrait de la page s’il le juge plus utile, selon sa documentation sur les extraits. Visez 140 à 160 caractères, avec le mot-clé et une raison de cliquer. La méta description n’influence pas directement le classement, mais elle joue sur le taux de clic.
Voici le code HTML pour insérer un Title avec sa méta description :
<html>
<head>
<title>qu’est-ce qu’un audit sémantique ?</title>
<meta name="description" content="Votre contenu est riche d’informations, mais sa sémantique est pauvre ? Améliorez-la avec un audit sémantique.">
</head>
</html>
Pour aller plus loin sur ces balises, lisez aussi nos conseils pour rédiger un titre d’article et pour optimiser un article de blog.
| Balise | Rôle | Où elle apparaît | Bonne pratique |
|---|---|---|---|
| <title> | Titre de la page pour les moteurs | Onglet du navigateur, résultats de recherche | Unique par page, mot-clé au début, 60 caractères environ |
| <meta name="description"> | Résumé de la page | Sous le titre dans les résultats | 140 à 160 caractères, incitatif, une par page |
| <h1> | Titre principal du contenu | Haut de la page | Un seul par page, clair, avec le sujet |
| <h2> à <h6> | Intertitres hiérarchisés | Dans le corps du texte | Dans l’ordre, sans sauter de niveau |
| <ul>, <ol>, <li> | Listes à puces ou numérotées | Dans le corps du texte | Pour des éléments parallèles ou des étapes |
| <strong> | Importance forte (gras) | Dans le corps du texte | Quelques mots par paragraphe, pas plus |
| <em> / <i> | Emphase / terme particulier (italique) | Dans le corps du texte | Citations, mots étrangers, titres d’œuvres |
| <img alt=""> | Image et sa description | Dans le corps du texte | Alt descriptif, vide pour une image décorative |
| <a href=""> | Lien | Dans le corps du texte | Ancre descriptive, jamais « cliquez ici » |
Ces balises paraissent basiques, et pourtant beaucoup de sites les négligent. Le chapitre SEO du Web Almanac 2024 de HTTP Archive, qui analyse plusieurs millions de pages, le montre :
Autrement dit, soigner ces quelques balises suffit souvent à faire mieux qu’une bonne partie de vos concurrents. Un audit SEO permet de repérer rapidement les pages concernées : nous proposons un pré-audit SEO gratuit pour commencer.
Pour distinguer une balise HTML dans un article web, rien de plus simple. Elle se compose d’une balise ouvrante, par exemple <h2>, et d’une balise fermante qui reprend le même nom précédé d’une barre oblique, par exemple </h2>. Certaines balises, comme <img>, n’ont pas de balise fermante. Il existe différentes balises et celles-ci comportent des termes très variés à insérer entre les balises ouvrantes et fermantes selon leurs objectifs.
Les balises HTML à prioriser sont :
Oubliez en revanche la méta keywords : Google a annoncé dès 2009 qu’il n’utilise pas cette balise pour classer les pages.
La balise span, codée <span>, est efficace lors de la création du template d’un site ou d’une page afin de délimiter les zones de textes. Grâce à elle, vous ne vous retrouverez pas avec un seul et unique bloc de texte lors de l’ajout de matière textuelle.
Sources
Ne manquez aucune astuce SEO pour dominer Google