Débutant15 min de lecture

Formatage du texte

Apprends à mettre en valeur, surligner et formater du texte en utilisant des éléments HTML comme strong, em, code, et plus encore.

Formatage sémantique vs. visuel

HTML fournit plusieurs éléments pour formater le texte. Le principe clé à comprendre est la différence entre le formatage sémantique et visuel.

Les éléments sémantiques décrivent la signification ou le but du texte :

  • <strong> — Indique une forte importance. Les navigateurs l'affichent en gras.
  • <em> — Indique une emphase. Les navigateurs l'affichent en italique.

Les éléments purement visuels décrivent uniquement l'apparence du texte, sans transmettre de signification :

  • <b> — Texte en gras, sans importance ajoutée.
  • <i> — Texte en italique, sans emphase ajoutée.

Privilégie toujours les éléments sémantiques. Les lecteurs d'écran et les moteurs de recherche les utilisent pour mieux comprendre ton contenu. Utilise <strong> au lieu de <b> lorsque le texte est vraiment important, et <em> au lieu de <i> lorsque tu veux vraiment mettre l'accent sur quelque chose.

Éléments de formatage en pratique

html
<p><strong>Attention :</strong> Ne touche pas la surface chaude.</p>

<p>Le HTML est <em>vraiment</em> amusant à apprendre.</p>

<p>La fonction <code>console.log()</code> affiche le résultat dans la console du navigateur.</p>

<p>L'eau est H<sub>2</sub>O et la formule de l'aire est r<sup>2</sup>.</p>

<p>Ce texte a été <del>supprimé</del> et <ins>remplacé</ins>.</p>

<p>Utilise le mot-clé <mark>surligné</mark> dans ta recherche.</p>

Autres éléments de formatage

Au-delà du gras et de l'italique, HTML offre plusieurs autres éléments de formatage utiles :

  • <code> — Représente un fragment de code informatique. Affiché dans une police monospace.
  • <sub> — Texte en indice (apparaît légèrement en dessous de la ligne normale, utile pour les formules chimiques comme H₂O).
  • <sup> — Texte en exposant (apparaît légèrement au-dessus de la ligne normale, utile pour les exposants comme x²).
  • <del> — Texte barré indiquant que quelque chose a été supprimé ou n'est plus exact.
  • <ins> — Texte souligné indiquant une insertion ou un ajout.
  • <mark> — Texte surligné, comme s'il était marqué avec un surligneur.

Tu peux aussi imbriquer des éléments de formatage. Par exemple :

<p><strong><em>Ce texte est en gras et en italique.</em></strong></p>

Lorsque tu imbriques des éléments, ferme toujours les balises dans l'ordre inverse de leur ouverture.

Quel élément dois-tu utiliser pour marquer du texte comme important, plutôt que simplement visuellement en gras ?

Prêt à pratiquer ?

Crée ton compte gratuit pour accéder à l'éditeur de code interactif, lancer les défis et suivre ta progression.