Balises HTML pour la mise en forme du texte
En HTML, un certain nombre d’éléments sont utilisés pour mettre en forme le texte. Les balises de mise en forme sont divisées en deux groupes : les balises physiques, utilisées pour styliser le texte (apparence visuelle du texte), et les balises logiques ou sémantiques, qui ajoutent une valeur sémantique aux parties du texte (par exemple, elles indiquent aux moteurs de recherche pour quels mots-clés une page web doit être classée).
Allons plus loin et parlons en détail des balises de mise en forme.
Les balises <h1>-<h6>
Les balises <h1>-<h6> sont utilisées pour définir les titres HTML. Il existe 6 niveaux de titres en HTML : <h1> définit les titres les plus importants et <h6> les moins importants.
Exemple des balises HTML <h1>-<h6> :
Exemple des balises HTML <h1>|Balises de mise en forme du texte|W3Docs
<!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>
La balise <b> est une balise physique qui signifie texte en gras, tandis que la balise <strong>, en tant que balise logique, est utilisée pour mettre en évidence l’importance du texte.
Exemple des balises HTML <b> et <strong> :
Exemple de la balise HTML <b> et <strong>|Balises de mise en forme du texte|W3Docs
<!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>
Les balises <i> et <em> définissent du texte en italique. La balise <i> ne concerne que l’apparence visuelle du texte inclus, sans importance supplémentaire. La balise <em> définit un texte mis en emphase, avec une importance sémantique ajoutée.
Exemple des balises HTML <i> et <em> :
Exemple des balises <i> et <em>|Balises de mise en forme du texte|W3Docs
<!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> est utilisée pour définir du texte préformaté. Les navigateurs affichent le texte inclus avec les espaces et les sauts de ligne.
Exemple de la balise HTML <pre> :
Exemple de la balise HTML <pre>|Balises de mise en forme du texte|W3Docs
<!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> est utilisée pour 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> :
Exemple de la balise HTML <mark>|Balises de mise en forme du texte|W3Docs
<!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 du texte d’un niveau par rapport à la taille de police de base du document (de medium à small, ou de x-large à large). La balise contient généralement des éléments d’importance secondaire tels que des mentions de copyright, des remarques en marge ou des mentions légales.
Exemple de la balise HTML <small> :
Exemple de la balise HTML <small>|Balises de mise en forme du texte|W3Docs
<!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> spécifie une partie du texte qui a été supprimée du document. Les navigateurs affichent ce texte barré.
Exemple de la balise HTML <del> :
Exemple de la balise HTML <del>|Balises de mise en forme du texte|W3Docs
<!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> définit un texte qui n’est plus correct ou pertinent.
Exemple de la balise HTML <s> :
Exemple de la balise HTML <s>|Balises de mise en forme du texte|W3Docs
<!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é leur similitude visuelle, ces balises ne peuvent pas se remplacer l’une l’autre.
Les balises <ins> et <u>
La balise <ins> définit le texte qui a été inséré (ajouté) au document. Le contenu de la balise s’affiche souligné.
Exemple de la balise HTML <ins> :
Exemple de la balise HTML <ins>|Balises de mise en forme du texte|W3Docs
<!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
La balise <u> spécifie un texte qui est stylistiquement différent du texte normal, c’est-à-dire des mots ou fragments de texte qui doivent être présentés différemment. Il peut s’agir de mots mal orthographiés ou de noms propres en chinois.
Exemple de la balise HTML <u> :
Exemple de la balise HTML <u>|Balises de mise en forme du texte|W3Docs
<!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 des 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 un exposant, placé légèrement au-dessus de la ligne normale du texte et 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> :
Exemple des balises HTML <sub> et <sup>|Balises de mise en forme du texte|W3Docs
<!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> est utilisée pour définir le terme mentionné pour la première fois. Le contenu de la balise s’affiche en italique.
Exemple de la balise HTML <dfn> :
Exemple de la balise HTML <dfn>|Balises de mise en forme du texte|W3Docs
<!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>Les balises <p>, <br> et <hr>
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> :
Exemple de la balise HTML <p>|Balises de mise en forme du texte|W3Docs
<!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 seul saut de ligne. Contrairement à la balise <p>, aucun retrait vide n’est ajouté avant la ligne.
Exemple de la balise HTML <br> :
Exemple de la balise HTML <br>|Balises de mise en forme du texte|W3Docs
<!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 des éléments de niveau paragraphe dans une page HTML. Dans les versions précédentes de HTML, elle était utilisée pour tracer une ligne horizontale sur la page afin de séparer visuellement le contenu. En HTML5, l’élément a une signification sémantique.
Exemple de la balise HTML <hr> :
Exemple de la balise HTML <hr>|Balises de mise en forme du texte|W3Docs
<!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>Practice
Which of the following HTML tags are used for text formatting?