Balises HTML pour la mise en forme du texte
Balises de mise en forme HTML : balises sémantiques strong et em, balises présentationnelles b et i, différences clés et exemples.
HTML fournit un ensemble d'éléments en ligne pour mettre en forme le texte. Ils se divisent en deux groupes, et comprendre la différence entre eux est l'essentiel à retenir de cette page.
- Les balises sémantiques (logiques) décrivent ce que le texte signifie — qu'un mot est important, mis en valeur, un terme défini ou une abréviation. Exemples :
<strong>,<em>,<mark>,<abbr>. - Les balises présentationnelles (physiques) décrivent comment le texte doit apparaître — en gras, en italique, souligné — sans rien dire de sa signification. Exemples :
<b>,<i>,<u>,<small>.
Pourquoi cette distinction est importante
Deux éléments peuvent sembler identiques dans le navigateur tout en ayant des significations très différentes :
- Lecteurs d'écran et accessibilité. Un lecteur d'écran peut moduler le ton de sa voix pour
<strong>et<em>, signalant importance et emphase à un utilisateur malvoyant. Il ne fait pas cela pour<b>et<i>, qui sont silencieux et purement visuels. - SEO. Les moteurs de recherche accordent du poids au balisage sémantique. Encadrer une expression clé dans
<strong>indique aux robots d'exploration qu'elle est importante ;<b>ne modifie que la police. - Maintenabilité. Le sens reste correct lorsque votre CSS change. Si vous décidez ultérieurement que le texte important doit être rouge plutôt que gras,
<strong>signifie toujours « important » et vous n'avez qu'à le restyliser.
Une bonne règle de base : privilégiez en premier la balise sémantique. N'utilisez une balise présentationnelle que lorsque vous souhaitez spécifiquement un effet visuel sans signification sous-jacente.
Examinons chaque balise de mise en forme en détail.
Les balises <h1>-<h6>
Les balises <h1>-<h6> servent à définir les titres HTML. Il existe 6 niveaux de titres en HTML ; <h1> définit le titre le plus important et <h6> le moins important.
Exemple des balises HTML <h1>-<h6> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Résultat
Les balises <b> et <strong>
Toutes deux s'affichent en gras par défaut, mais elles ont des significations différentes en HTML5.
- La balise
<strong>est une balise sémantique qui indique que le texte a une importance forte, une gravité ou une urgence — un contenu que le lecteur ne doit pas manquer. - La balise
<b>est une balise présentationnelle qui marque un texte stylistiquement distinct de la prose environnante sans lui conférer d'importance supplémentaire — par exemple un nom de produit, un mot-clé dans un index, ou la phrase d'ouverture d'un article.
Laquelle choisir ? Si le style gras existe pour signaler l'importance, utilisez <strong>. Si vous voulez simplement du gras pour une convention typographique sans signification ajoutée, utilisez <b> (ou mieux, stylisez le texte avec CSS).
Exemple des balises HTML <b> et <strong> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We use the <strong> tag to highlight the importance <strong> of this part of the text</strong>.</p>
<p>The <b> tag is a physical tag that stands for <b>bold text</b>.</p>
</body>
</html>Les balises <i> et <em>
Toutes deux s'affichent en italique par défaut, mais elles ont des significations distinctes en HTML5.
- La balise
<em>est une balise sémantique qui marque une emphase accentuée — celle qui change le sens d'une phrase (« J'adore HTML » ou « Moi, j'adore HTML »). Un lecteur d'écran peut la prononcer avec une accentuation supplémentaire. - La balise
<i>est une balise présentationnelle pour un texte dans une voix ou un registre alternatif : un terme technique, une expression en langue étrangère, une pensée, le nom d'un navire, ou tout autre contenu traditionnellement mis en italique — sans impliquer d'emphase.
Laquelle choisir ? Si vous mettez en valeur un mot pour qu'il soit lu avec une accentuation orale, utilisez <em>. Pour une convention typographique en italique sans emphase, utilisez <i>.
Exemple des balises HTML <i> et <em> :
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph</p>
<p>The important part of the text is defined <em> in italic</em>.</p>
<p><i>Lorem ipsum</i>, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p>
</body>
</html>La balise <pre>
La balise <pre> sert à définir du texte préformaté. Les navigateurs affichent le texte qu'elle contient en conservant les espaces et les sauts de ligne.
Exemple de la balise HTML <pre> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>La balise <mark>
La balise <mark> sert à présenter une partie du texte dans un document comme marquée ou surlignée à des fins de référence.
Exemple de la balise HTML <mark> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn the HyperText Markup Language on <mark>W3Docs.com</mark>.</p>
</body>
</html>Résultat
La balise <small>
La balise <small> réduit la taille de la police d'un cran par rapport à la taille de base du document (de moyen à petit, ou de très grand à grand). Elle contient généralement des éléments d'importance secondaire tels que les mentions de droits d'auteur, les commentaires annexes ou les mentions légales.
Exemple de la balise HTML <small> :
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>Les balises <del> et <s>
La balise <del> indique une partie du texte qui a été supprimée du document. Les navigateurs affichent ce texte avec un barré.
Exemple de la balise HTML <del> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> She likes <del>violets</del> snowdrops․</p>
</body>
</html>La balise <s> marque un texte qui n'est plus exact ou pertinent — par exemple un ancien prix à côté d'un prix réduit. (Remarque : <s> n'est pas destiné aux suppressions dans un document édité ; utilisez <del> pour cela.)
Exemple de la balise HTML <s> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><s>I am studying in high school.</s></p>
<p>I am studying in a university.</p>
</body>
</html>Le contenu des deux balises s'affiche barré. Cependant, malgré la similarité visuelle, ces balises ne peuvent pas se remplacer l'une l'autre : <del> signifie « supprimé lors d'une modification », tandis que <s> signifie « n'est plus exact ».
Les balises <ins> et <u>
La balise <ins> définit un texte qui a été inséré (ajouté) dans le document, généralement en pendant de <del>. Le contenu s'affiche souligné par défaut.
Exemple de la balise HTML <ins> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del>violets</del> <ins>snowdrops</ins>․</p>
</body>
</html>Résultat
En HTML5, la balise <u> représente une annotation non textuelle et non articulée — un texte marqué avec un style (un soulignement par défaut) qui porte une signification non explicitée dans le texte lui-même. Les utilisations typiques sont le signalement d'un mot mal orthographié ou le marquage de noms propres en texte chinois. Évitez <u> pour la décoration pure, car les utilisateurs pourraient confondre le soulignement avec un lien ; utilisez plutôt la propriété CSS text-decoration.
Exemple de la balise HTML <u> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Here we used <u>the <u> tag</u>.</p>
</body>
</html>Les balises <sub> et <sup>
La balise <sub> définit les textes en indice. Le texte en indice se situe sous la ligne de base des autres symboles de la ligne et a une police plus petite. La balise <sup> définit l'exposant, qui est placé légèrement au-dessus de la ligne normale et est relativement plus petit que le reste du texte. La ligne de base passe par le bord supérieur ou inférieur des symboles.
Exemple des balises HTML <sub> et <sup> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH </p>
<p>E = mc<sup>2</sup>, where E — rest energy, m — mass, c — the speed of light. </p>
</body>
</html>Résultat
La balise <dfn>
La balise <dfn> marque l'instance définissante d'un terme — l'endroit dans le texte où le terme est défini, et non chaque endroit où il apparaît. C'est une balise sémantique ; les navigateurs la rendent en italique par défaut, mais ce style est accessoire et peut être modifié avec CSS.
Exemple de la balise HTML <dfn> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><dfn>HTML</dfn> (HyperText Markup Language ) — The standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the language HTML</p>
</body>
</html>Autres éléments textuels sémantiques
HTML dispose de plusieurs autres balises en ligne qui ajoutent du sens à des types spécifiques de texte. Elles ne servent pas à la mise en forme — chacune décrit ce qu'est le texte :
<abbr>— une abréviation ou un acronyme, par ex.<abbr title="HyperText Markup Language">HTML</abbr>. L'attributtitlefournit le développement complet au survol.<cite>— le titre d'une œuvre citée (un livre, un film, un article, etc.).<q>— une courte citation en ligne ; le navigateur ajoute automatiquement les guillemets.<code>— un fragment de code informatique, affiché dans une police à chasse fixe.<kbd>— une saisie clavier que l'utilisateur doit taper, par ex. Ctrl + C.<samp>— un exemple de sortie d'un programme ou d'un système.<var>— une variable dans une expression mathématique ou un contexte de programmation.
Exemple d'éléments textuels sémantiques :
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="HyperText Markup Language">HTML</abbr> spec is huge.</p>
<p>As stated in <cite>The HTML Handbook</cite>:
<q>Use the right element for the job.</q></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to run <code>document.title</code>.</p>
<p>The program printed <samp>Hello, world!</samp> where <var>x</var> = 5.</p>
</body>
</html>Balises obsolètes — À ne pas utiliser
Quelques anciennes balises de mise en forme ont été supprimées du standard HTML. Elles peuvent encore s'afficher dans les navigateurs, mais vous ne devez jamais les utiliser — remplacez la présentation par CSS et le sens par des balises sémantiques :
| Balise obsolète | Ce qu'elle faisait | À utiliser à la place |
|---|---|---|
<font> | Définissait la couleur, la taille, la police | CSS color, font-size, font-family |
<center> | Centrait le contenu | CSS text-align: center ou margin: auto |
<tt> | Texte de type télétype / à chasse fixe | <code>, <kbd>, <samp>, ou CSS font-family: monospace |
<strike> | Texte barré | <del> / <s>, ou CSS text-decoration: line-through |
<big> | Texte plus grand | CSS font-size |
Balises structurelles : <p>, <br> et <hr>
Les trois prochaines balises ne sont pas des balises de mise en forme du texte — elles structurent le flux du contenu plutôt que de styliser les mots en ligne — mais elles sont étroitement liées et méritent d'être abordées ici.
La balise <p> définit le paragraphe. Les navigateurs ajoutent automatiquement une marge de 1em avant et après chaque paragraphe.
Exemple de la balise HTML <p> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
</body>
</html>La balise <br> insère un saut de ligne simple. Contrairement à la balise <p>, aucun espace vide n'est ajouté avant la ligne.
Exemple de la balise HTML <br> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>How to use the <br /> tag</h1>
<p> We can insert the <br /> tag inside the paragraph, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>En HTML5, la balise <hr> définit un changement thématique entre les éléments de niveau paragraphe dans une page HTML. Dans les versions précédentes de HTML, elle servait à tracer une ligne horizontale sur la page pour séparer visuellement le contenu. En HTML5, l'élément a une signification sémantique.
Exemple de la balise HTML <hr> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Football</h1>
<p>A team sport involving kicking a ball to score a goal. </p>
<hr />
<h1>Basketball</h1>
<p>A game that is played between two teams of five players.</p>
</body>
</html>