Ce que veut dire HTML gras
Le HTML gras, c'est du texte que le navigateur dessine avec des lettres plus épaisses. Il y a donc trois façons de l'obtenir. D’abord, la balise <b>. Ensuite, la balise <strong>. Enfin, CSS peut mettre n'importe quel texte en gras avec font-weight.
À l'écran, les trois se ressemblent pourtant. Pourtant, elles ne veulent pas dire la même chose. L'une n'est qu'un style. Une autre dit au lecteur que ces mots comptent. Et la troisième a sa place dans votre feuille de style, pas dans le texte.
Ce guide montre donc laquelle utiliser, et quand. Ensuite, il explique ce que le HTML gras apporte au SEO, à partir de quand il y en a trop, et comment corriger une page où presque chaque ligne est en gras. Notre SEO Checker gratuit repère ce dernier problème, c’est pourquoi nous expliquons aussi sa règle.
La balise HTML gras : b
L'élément <b> est la plus ancienne balise HTML gras. Vous y placez des mots, puis le navigateur les affiche en gras. Voici l'exemple le plus simple :
<p>Ajoutez <b>deux tasses</b> de farine.</p>Aujourd'hui, la norme HTML donne à <b> un rôle limité. Il marque des mots qui doivent ressortir, sans être plus importants que le reste. Donc il n'ajoute rien au sens. Ainsi, il change seulement l'aspect des mots.
Quand utiliser la balise b
Utilisez <b> quand vous voulez que l'œil s'arrête sur un mot, sans avertir ni insister. Par exemple :
- Les mots clés d'un résumé, pour le lire en diagonale.
- Les noms de produits dans un avis.
- Les premiers mots d'une brève, que certains sites mettent en gras.
- Les mots d'une liste que le lecteur doit retrouver vite.
Le HTML Living Standard présente <b> comme un dernier recours. Autrement dit, choisissez d’abord une balise qui a un vrai sens. Puis utilisez <b> seulement si rien d'autre ne convient.
La balise strong
La balise <strong> affiche aussi le texte en gras. Cependant, elle porte en plus un message. Elle dit en effet que ces mots sont importants, graves ou urgents.
<p><strong>Attention :</strong> débranchez l'appareil avant de l'ouvrir.</p>Ce sens compte. Les moteurs de recherche et les outils d'IA lisent la balise. Certains lecteurs d'écran peuvent aussi l'annoncer, si l'utilisateur active cette option. Ainsi, <strong> leur indique à tous, comme à vos lecteurs, quels mots pèsent le plus.
Quand utiliser la balise strong
- Un avertissement, comme un risque de perte de données.
- Une condition clé, comme une date limite ou un prix.
- La seule phrase d'une longue section que personne ne doit rater.
Vous pouvez aussi en mettre une dans une autre. Le texte dans deux balises <strong> compte comme plus important que dans une seule. Malgré tout, presque aucune page n'en a besoin. Si vous imbriquez souvent, c'est sans doute le texte qu'il faut réécrire.
strong ou b en HTML
On demande souvent laquelle est « la meilleure ». En réalité, la vraie question est laquelle dit vrai pour vos mots. Voici donc la réponse courte.
<b>veut dire « regardez ici ». Elle ajoute seulement du style.<strong>veut dire « ceci compte ». Elle ajoute du sens et du style.- Les deux sont en gras par défaut, car le navigateur les affiche ainsi.
- Les deux sont du HTML5 valide. Aucune n'est périmée ni interdite.
Posez-vous donc une question. Si vous lisiez la phrase à voix haute, insisteriez-vous sur ces mots ? Si oui, utilisez <strong>. Si vous voulez seulement attirer l'œil, utilisez <b>. Et si le gras fait partie du design, comme le libellé d'un bouton, utilisez plutôt CSS.
Et l'italique ? C’est la même logique, car em et i jouent les mêmes rôles. La balise <em> marque l'insistance, alors que <i> change seulement l'aspect. Ainsi, les paires s'alignent bien : strong et em portent le sens, b et i portent le style.
Texte en gras avec CSS
Quand le gras fait partie du design, il va dans le CSS. Les titres, les boutons, les liens du menu et les en-têtes de tableau en sont de bons exemples. Pour cela, la propriété à utiliser est font-weight.
.price {
font-weight: 700;
}Les valeurs vont de 100, très fin, à 900, très épais. Le texte normal vaut 400 et le gras 700. Vous pouvez aussi écrire bold au lieu de 700, car les deux veulent dire la même chose.
bold, bolder et les nombres
Le mot bolder veut dire un cran plus épais que le texte parent. Cela semble pratique. Pourtant, le résultat dépend de la police. Si une police n'a pas de graisse 800, le navigateur peut l'imiter ou l'ignorer. C’est pourquoi les nombres fixes sont plus prévisibles.
Un mot sur les polices
Une police web n'est belle en gras que si vous chargez son fichier gras. Sinon, le navigateur épaissit les lettres normales pour imiter le gras. Par conséquent, ce faux gras paraît flou. Par conséquent, chargez la graisse 700 de toute police que vous comptez mettre en gras.
Enfin, CSS peut aussi retirer le gras. Par exemple, strong { font-weight: 600; } allège un peu le texte strong sur tout le site. Le sens reste, puisque la balise est toujours là.
Le gras aide-t-il le SEO ?
Un peu, et seulement s'il est honnête. Google a dit qu'il lit le texte en gras comme un indice sur le sujet d'un passage. Cependant, c'est un petit indice. Il ne fera pas monter une page faible, et il ne remplace jamais des titres clairs et un bon texte.
Surtout, le gras aide les gens. Un lecteur pressé regarde d’abord les titres, puis les mots en gras. Donc si vos mots en gras résument chaque section, les lecteurs restent plus longtemps. Et c'est justement ce que les moteurs veulent voir.
Quand le gras fait du tort
En revanche, le gras ne marche plus quand il y en a trop. Si la moitié de la page est en gras, rien ne ressort. Pire encore, une page pleine de mots clés en gras ressemble à du bourrage de mots clés. C’est pourquoi des audits comme Seobility, et notre propre outil, le signalent.
Règle simple : quelques mots en gras par section, jamais des phrases entières, et jamais deux fois la même expression.
Combien de gras, c'est trop
Il n'y a pas de limite officielle. Malgré tout, les outils d'audit s'accordent sur la forme du problème. Ensuite, notre SEO Checker compte chaque <b> et chaque <strong> de la page. Puis il affiche une alerte dans trois cas.
- Trop nombreux. La page a plus de 20 passages en gras, et plus d'un tous les 40 mots.
- Répétés. Le même texte est en gras plus d'une fois, comme un mot clé dans chaque paragraphe.
- Trop longs. Un passage en gras dépasse 70 caractères, soit une phrase entière.
La première règle suit la taille de la page. Un guide de 4 000 mots peut porter plus de gras qu'une fiche produit de 300. En revanche, la deuxième et la troisième règle valent pour toutes les pages, car une répétition ou une phrase en gras n'aide jamais le lecteur.
Pourquoi une phrase entière en gras pose problème
Une phrase en gras se lit mal. De plus, les lettres épaisses fatiguent sur la longueur. De plus, si la phrase est si importante, elle mérite peut-être un titre ou un encadré. L'un comme l'autre ressort mieux que le gras.
Corriger un excès de gras
La correction relève surtout de la rédaction, pas du code. Ainsi, chaque page ne prend que quelques minutes. Voici l'ordre que nous suivons sur les sites de nos clients.
Étape 1 : trouver chaque passage en gras
Analysez la page avec le SEO Checker. Ensuite, ouvrez l'onglet Elements, où le texte en gras apparaît avec son nombre. Sinon, cherchez <b> et <strong> dans le code source.
Étape 2 : supprimer les répétitions
Gardez le premier gras de chaque expression et supprimez les autres. Un mot clé ne devient pas plus fort la troisième fois. En effet, le lecteur ne le remarque plus après la première.
Étape 3 : raccourcir les longs passages
Réduisez chaque phrase en gras aux deux ou trois mots qui la portent. Par exemple, au lieu de mettre en gras toute la phrase « Sauvegardez vos fichiers avant la mise à jour », écrivez « Sauvegardez vos fichiers avant la mise à jour ».
Étape 4 : passer le gras de design dans le CSS
Les libellés, les prix et les en-têtes de tableau relèvent du design. Donnez-leur donc une classe et une règle font-weight au lieu d'une balise. Ainsi, ils ne comptent plus comme du texte en gras.
<!-- Avant -->
<p><b>Prix :</b> 29 €</p>
<!-- Après -->
<p><span class="label">Prix :</span> 29 €</p>
.label { font-weight: 700; }Étape 5 : vérifier le résultat
Collez votre nouveau code dans l'éditeur HTML en ligne et comparez-le à l'ancien. Puis analysez de nouveau la page en ligne. L'alerte devrait disparaître. La vidéo ci-dessous montre toute la démarche sur une page d'exemple.
Le gras dans WordPress, Markdown et l'e-mail
Presque personne ne tape le HTML gras à la main. À la place, un éditeur l'écrit pour vous. Il est donc utile de savoir ce que chacun produit.
WordPress
Le bouton gras de l'éditeur de blocs, ou Ctrl+B, écrit <strong>. C’est très bien, car il s'agit d'une vraie insistance. Pourtant, beaucoup d'auteurs l'utilisent juste pour embellir le texte. Résultat, les articles WordPress finissent souvent avec bien trop de gras. Dans ce cas, utilisez plutôt un titre ou un bloc mis en forme.
Markdown
En Markdown, deux astérisques de chaque côté mettent le texte en gras : **comme ceci**. Ensuite, la plupart des outils le transforment en <strong>. Notre convertisseur Markdown vers HTML vous montre le HTML exact obtenu.
L'e-mail, c'est autre chose, car les messageries suppriment presque tout le CSS. Par conséquent, <b> et <strong> sont plus sûres qu'une classe dans un e-mail. Ainsi, les deux fonctionnent dans toutes les grandes boîtes de réception.
Erreurs fréquentes
- Mettre un mot clé en gras dans chaque paragraphe pour « aider le SEO ». Cela ressemble à du bourrage.
- Mettre un paragraphe entier en gras pour qu'il ressorte. Un titre ou un encadré fait mieux.
- Utiliser
<strong>pour des libellés de design. Utilisez CSS, pour que la balise garde son sens. - Écrire
<b><strong>ensemble. Une seule suffit. - Charger une police web sans son fichier gras, ce qui donne un faux gras flou.
- Utiliser l'ancienne balise
<font>ou des styles en ligne. Déplacez le style dans votre CSS.
Chacune de ces erreurs se corrige facilement dès qu'on la voit. Voilà pourquoi une analyse rapide vient en premier. Si vous voulez tous les détails, la page MDN sur l'élément strong vaut la lecture.
Questions et réponses
Comment mettre du texte en gras en HTML ?
Placez les mots dans une balise b ou strong, par exemple <b>texte</b>. Utilisez strong quand les mots sont importants, et b quand ils doivent seulement ressortir.
Quelle est la balise HTML gras ?
La balise HTML gras est b. Elle affiche donc le texte en gras sans ajouter de sens. La balise strong paraît aussi en gras, mais elle marque les mots comme importants.
La balise b est-elle obsolète ?
Non. La balise b reste du HTML5 valide. La norme a seulement resserré son sens : elle marque un texte qui doit ressortir sans être plus important.
Quelle différence entre strong et b ?
Les deux paraissent en gras. Cependant, strong dit que les mots sont importants, et les lecteurs d'écran comme les moteurs peuvent le lire. En revanche, la balise b change seulement l'aspect.
Faut-il utiliser strong ou b pour le SEO ?
Utilisez celle qui dit vrai pour vos mots. Strong convient à une vraie insistance. Aucune ne fait monter une page à elle seule, et trop de l'une ou l'autre peut nuire.
Comment mettre du texte en gras avec CSS ?
Ajoutez font-weight: 700 à une règle, par exemple .price { font-weight: 700; }. De plus, le mot bold veut dire la même chose que 700.
Quel font-weight correspond au gras ?
Le gras vaut 700 et le texte normal 400. L'échelle va de 100 à 900, mais chaque police n'a que les graisses qu'elle fournit.
Le texte en gras aide-t-il le SEO ?
Un peu. Google lit le gras comme un petit indice sur le sujet. Cependant, sa vraie valeur, c'est d'aider les lecteurs à parcourir la page.
À partir de quand y a-t-il trop de gras ?
Notre outil alerte au-delà de 20 passages en gras quand il y en a plus d'un tous les 40 mots. Il alerte aussi si le même texte est en gras deux fois, ou si un passage dépasse 70 caractères.
Pourquoi mon SEO checker dit-il que presque tout est en gras ?
C’est parce que la page a beaucoup de gras pour sa longueur. Supprimez donc les répétitions, réduisez les phrases en gras à quelques mots et passez le gras de design, comme les libellés, dans le CSS.
Le gras nuit-il à l'accessibilité ?
Non, en petite quantité. En fait, strong peut aider, car certains lecteurs d'écran peuvent l'annoncer. Les longs passages en gras restent toutefois plus durs à lire pour tous.
Peut-on imbriquer des balises strong ?
Oui. Le texte dans deux balises strong compte comme plus important que dans une seule. Malgré tout, si vous imbriquez souvent, le texte demande sans doute une réécriture.
Qu'écrit Ctrl+B dans WordPress ?
Dans l'éditeur de blocs, Ctrl+B et le bouton gras écrivent tous deux une balise strong. Donc chaque mot mis en gras compte comme texte important.
Comment écrire en gras en Markdown ?
Mettez deux astérisques de chaque côté, comme **ceci**. La plupart des outils Markdown en font une balise strong dans le HTML.
Faut-il b ou strong dans les e-mails ?
Les deux marchent dans toutes les grandes messageries. De plus, elles sont plus sûres que les classes CSS, que beaucoup de boîtes de réception suppriment.
Pourquoi ma police en gras paraît-elle floue ?
Le fichier gras de la police web n'est pas chargé, donc le navigateur l'imite. Pour cela, chargez donc la graisse 700 de la police.
Peut-on retirer le gras d'une balise strong ?
Oui. Une règle CSS comme strong { font-weight: 400; } retire l'aspect. Le sens reste, car la balise est toujours dans le HTML.
Peut-on encore utiliser la balise font pour le gras ?
Non. La balise font est obsolète en HTML5. Utilisez donc CSS pour l'aspect, et b ou strong dans le texte.
Quelle est la version italique de strong ?
C'est la balise em, qui marque l'insistance. La balise i est sa partenaire de pur style, tout comme b pour le gras.
Comment vérifier le gras de ma page ?
Analysez la page avec le SEO Checker gratuit de Denwix. Son onglet Elements liste chaque passage en gras, et l'onglet Checks indique s'il y en a trop.