Le formatage HTML est un processus de formatage du texte pour une meilleure apparence. HTML nous offre la possibilité de formater du texte sans utiliser CSS. Il existe de nombreuses balises de formatage en HTML. Ces balises sont utilisées pour rendre le texte en gras, en italique ou souligné. Il existe près de 14 options disponibles pour l’affichage du texte en HTML et XHTML.
En HTML, les balises de formatage sont divisées en deux catégories:
- Balise physique: Ces balises permettent de donner l’aspect visuel du texte.
- Balise logique: Ces balises permettent d’ajouter une valeur logique ou sémantique au texte.
Ici, nous allons apprendre 14 balises de formatage HTML. Voici la liste du texte de formatage HTML.
| Nom de l’élément | La description |
|---|---|
| <b> | Il s’agit d’une balise physique, utilisée pour mettre en gras le texte écrit entre elles. |
| <strong> | Il s’agit d’une balise logique, qui indique au navigateur que le texte est important. |
| <i> | Il s’agit d’une balise physique utilisée pour rendre le texte en italique. |
| <em> | Il s’agit d’une balise logique utilisée pour afficher le contenu en italique. |
| <mark> | Cette balise est utilisée pour surligner du texte. |
| <u> | Cette balise est utilisée pour souligner le texte écrit entre elle. |
| <tt> | Cette balise est utilisée pour faire apparaître un texte en télétype. (non pris en charge en HTML5) |
| <strike> | Cette balise est utilisée pour tracer un barré sur une section de texte. (Non pris en charge en HTML5) |
| <sup> | Il affiche le contenu légèrement au-dessus de la ligne normale. |
| <sub> | Il affiche le contenu légèrement en dessous de la ligne normale. |
| <del> | Cette balise est utilisée pour afficher le contenu supprimé. |
| <ins> | Cette balise affiche le contenu qui est ajouté |
| <big> | Cette balise est utilisée pour augmenter la taille de la police d’une unité conventionnelle. |
| <small> | Cette balise est utilisée pour réduire la taille de la police d’une unité par rapport à la taille de la police de base. |
1) Texte en gras
Eléments de formatage HTML <b> et <strong>
L’élément HTML <b> est une balise physique qui affiche le texte en gras, sans importance logique. Si vous écrivez quoi que ce soit dans l’élément <b> ………… </b>, s’affiche en caractères gras.
Voir cet exemple:
<p> <b> Écrivez votre premier paragraphe en gras. </b> </p>
Résultat :
Écrivez votre premier paragraphe en gras.
La balise HTML <strong> est une balise logique, qui affiche le contenu en gras et informe le navigateur de son importance logique. Si vous écrivez quelque chose entre <strong> … </strong>, affiche un texte en gras.
Voir cet exemple:
<p> <strong> Il s'agit d'un contenu important </strong>, et il s'agit d'un contenu normal </p>
Résultat :
Il s’agit d’un contenu important , et il s’agit d’un contenu normal
Exemple
<! DOCTYPE html> <html> <tête> <title> éléments de mise en forme </title> </head> <body> <h1> Explication de l'élément de mise en forme </h1> <p> <strong> Il s'agit d'un contenu important </strong>, et il s'agit d'un contenu normal </p> </body> </html>
Résultat :
2) Texte en italique
Éléments de formatage HTML <i> et <em>
L’élément HTML <i> est un élément physique, qui affiche le contenu inclus en italique, sans aucune importance supplémentaire. Si vous écrivez quelque chose dans l’élément <i> ………… </i>, s’affiche en italique.
Voir cet exemple:
<p> <i> Écrivez votre premier paragraphe en italique. </i> </p>
Résultat :
Écrivez votre premier paragraphe en italique.
La balise HTML <em> est un élément logique, qui affiche le contenu inclus en italique, avec une importance sémantique ajoutée.
Voir cet exemple:
<p> <em> Il s'agit d'un contenu important </em>, qui s'affiche en italique. </p>
Résultat :
Il s’agit d’un contenu important , qui s’affiche en italique.
3) Formatage marqué
Si vous souhaitez marquer ou mettre en surbrillance un texte, vous devez écrire le contenu dans <mark> ……… </mark>.
Voir cet exemple:
<h2> Je veux mettre un <mark> Mark </mark> sur votre visage </h2>
Résultat :
Je veux mettre un Mark sur votre visage
4) Texte souligné
Si vous écrivez quoi que ce soit dans l’élément <u> ……… </u>, le texte souligné apparaît.
Voir cet exemple:
<p> <u> Rédigez votre premier paragraphe en texte souligné. </u> </p>
Résultat :
Rédigez votre premier paragraphe en texte souligné.
5) texte barré
Tout ce qui est écrit dans l’élément <strike> ………………….. </strike> est affiché avec un barré. C’est une ligne mince qui traverse la déclaration.
Voir cet exemple:
<p> <strike> Écrivez votre premier paragraphe barré </strike>. </p>
Résultat :
Écrivez votre premier paragraphe barré .
6) police monospaced
Si vous voulez que chaque lettre ait la même largeur, écrivez le contenu dans l’élément <tt> …………. </tt>.
Remarque: nous savons que la plupart des polices sont appelées polices à largeur variable, car différentes lettres ont une largeur différente. (par exemple: « w » est plus large que « i »). La police à espacement fixe fournit un espace similaire entre chaque lettre.
Voir cet exemple:
<p> Bonjour <tt> Écrivez votre premier paragraphe dans une police à espace unique. </tt> </p>
Résultat :
Bonjour Écrivez votre premier paragraphe dans une police à espace unique.
7) texte en exposant
Si vous placez le contenu dans l’élément <sup> ………….. </sup>, s’affiche en exposant; signifie qu’il est affiché à une hauteur d’un demi-caractère au-dessus des autres caractères.
Voir cet exemple:
<p>Hello <sup>Écrivez votre première paragraphe en exposant.</sup></p>
Résultat :
Hello Écrivez votre première paragraphe en exposant.
8) Texte en indice
Si vous placez le contenu dans l’élément <sub> ………….. </sub>, s’affiche en indice; signifie qu’il est affiché à une hauteur d’un demi-caractère en dessous des autres caractères.
Voir cet exemple:
<p> Bonjour <sub> Écrivez votre premier paragraphe en indice. </sub> </p>
Résultat :
Bonjour Écrivez votre premier paragraphe en indice.
9) Texte supprimé
Tout ce qui se trouve entre <del> ………. </del> est affiché en tant que texte supprimé.
Voir cet exemple:
<p> Bonjour <del> Supprimez votre premier paragraphe. </del> </p>
Résultat :
Bonjour Supprimez votre premier paragraphe.
10) Texte inséré
Tout ce qui entre <ins> ………. </ins> est affiché sous forme de texte inséré.
Voir cet exemple:
<p> <del> Supprimez votre premier paragraphe. </del> <ins> Rédigez un autre paragraphe. </ins> </p>
Résultat :
Supprimez votre premier paragraphe. Rédigez un autre paragraphe.
11) Texte plus grand
Si vous souhaitez que la taille de votre police soit plus grande que le reste du texte, placez le contenu dans <big> ……… </big>. Il augmente une taille de police plus grande que la précédente.
Voir cet exemple:
<p> Bonjour <big> Écrivez le paragraphe dans une police plus grande. </big> </p>
Résultat :
Bonjour Écrivez le paragraphe dans une police plus grande.
12) Texte plus petit
Si vous souhaitez réduire la taille de votre police par rapport au reste du texte, placez le contenu dans la balise <small> ……… </small>. Cela réduit une taille de police par rapport à la précédente.
Voir cet exemple:
<p> Bonjour <small> Écrivez le paragraphe dans une police plus petite. </small> </p>
Résultat :
Bonjour Écrivez le paragraphe dans une police plus petite.