Comment mettre du texte en gras en HTML
Entourez le texte de <strong> ou de <b>. Les deux le mettent en gras :
Ils sont identiques à l'écran. La différence tient à ce qu'ils disent du texte.
strong ou b
| Balise | Signification | Exemple |
|---|---|---|
<strong> | Contenu important, sérieux ou urgent | <strong>Do not</strong> share your password. |
<b> | Se distingue, mais sans importance particulière | Mots-clés dans un résumé, nom de produit, premiers mots d'un article |
Choisissez <strong> quand vous hausseriez la voix ou voulez que le lecteur ne le rate pas. Choisissez <b> quand le gras est une convention visuelle pour ce type de texte. Si aucune ne convient et que vous voulez seulement un style, utilisez un <span> avec une classe et du CSS.
L'italique : em et i
La paire italique suit la même idée :
| Balise | Signification | Exemple |
|---|---|---|
<em> | Accentuation : la déplacer change le sens de la phrase | I <em>never</em> said that. |
<i> | Autre voix : mots étrangers, termes techniques, noms de navires, pensées | <i lang="la">et cetera</i> |
Les deux premières phrases ci-dessus utilisent les mêmes mots et ne veulent pas dire la même chose, à cause de la place de <em>. Quand <i> marque une expression dans une autre langue, ajoutez un attribut lang pour que les lecteurs d'écran la prononcent correctement.
Quelques autres balises sont en italique par défaut : <cite> (le titre d'une œuvre), <dfn> (un terme en cours de définition), <address> et <var>. Utilisez-les quand elles conviennent et laissez leur style par défaut faire le reste.
Gras et italique ensemble
Imbriquez une balise dans l'autre, et fermez-les dans l'ordre inverse :
<strong><em>text</strong></em> (fermé dans le mauvais ordre) s'affiche quand même, mais le navigateur doit réparer l'arbre et peut découper vos éléments ; voir les balises HTML pour voir à quoi ressemble cette réparation.
Gras et italique en CSS
Quand le style est purement visuel (un titre de carte, un prix, un libellé), utilisez le CSS sur l'élément lui-même au lieu d'ajouter une balise. font-weight contrôle le gras et font-style l'italique :
La dernière ligne montre que le sens et l'apparence sont séparés : le <strong> garde son sens tandis que le CSS lui donne un autre style. Toute la gamme des graisses (100 à 900) est présentée sur la page font-weight en CSS.
Accessibilité
Avec les réglages par défaut, la plupart des lecteurs d'écran ne changent pas de voix pour <strong> ou <em>, donc le gras et l'italique sont surtout des repères visuels. Tout ce qu'un utilisateur ne doit pas rater (une erreur, un champ obligatoire, une échéance) doit ressortir des mots eux-mêmes, pas seulement du style. Évitez aussi les longs passages en italique ou en gras : ils sont plus difficiles à lire, surtout pour les lecteurs dyslexiques.
Erreurs fréquentes
- Utiliser le gras comme titre. Une ligne en
<b>au-dessus d'une section n'est pas un titre pour les lecteurs d'écran. Utilisez<h2>ou<h3>et stylisez-le. - Utiliser
<strong>pour le style. Si rien dans le texte n'est important, utilisez<b>ou le CSS. - Mettre tout un paragraphe en gras. La mise en valeur fonctionne quand elle est rare. Mettez une expression en gras, pas le paragraphe.
- Fermer les balises dans le mauvais ordre.
<b><i>x</i></b>, jamais<b><i>x</b></i>. - Les anciennes balises. La balise
<font>des vieux tutoriels est obsolète. Utilisez les balises ci-dessus oufont-weight.
Questions fréquentes
Comment mettre du texte en gras en HTML ?
Entourez-le de <strong> quand les mots sont importants (<strong>Warning:</strong>), ou de <b> quand vous voulez seulement les faire ressortir sans importance particulière, comme un nom de produit. Les deux s'affichent en gras par défaut.
Quelle est la différence entre <strong> et <b> ?
<strong> signifie que le texte est important, sérieux ou urgent. <b> attire l'attention sur un texte sans lui donner d'importance, comme des mots-clés dans un résumé. Ils se ressemblent ; la différence est le sens, qui compte pour les lecteurs d'écran, les moteurs de recherche et les autres développeurs.
Comment mettre du texte en italique en HTML ?
Utilisez <em> pour une accentuation qui change le sens d'une phrase (« je l'ai bien dit », avec l'accent sur « bien »), et <i> pour un texte dans une autre voix : mots étrangers, termes techniques, noms de navires, pensées. Les deux s'affichent en italique.
Comment mettre du texte en gras et en italique à la fois ?
Imbriquez les balises : <strong><em>text</em></strong>. Fermez-les dans l'ordre inverse de leur ouverture. En CSS, définissez à la fois font-weight: bold et font-style: italic sur un seul élément.
Peut-on mettre du texte en gras avec le CSS ?
Oui : font-weight: bold (ou 700) sur n'importe quel élément. Utilisez le CSS quand le gras est purement visuel, comme le libellé d'un bouton ou le style d'un en-tête de tableau, et les balises HTML quand les mots eux-mêmes sont importants ou accentués.
