🎨 Les balises de mise en forme du texte en HTML

La clé pour ajouter du style aux pages web (sans se fâcher avec le CSS)

Imaginez une page web…
Le code est propre, tout fonctionne — mais le texte manque d’âme.
C’est là que les balises de mise en forme du texte en HTML entrent en scène et disent :

« Je ne suis pas seulement du texte — j’ai du sens. »

Dans cet article, vous trouverez :

• Des réponses claires à la question « À quoi sert cette balise ? »
• Des exemples concrets de « Où l’utiliser dans la vraie vie ? »
• Des avertissements du type « Ne fais pas ça — tu le regretteras »

🅱️ <b> vs <strong>

Le combat du texte en gras : apparence ou sens ?

Nous commençons avec deux balises qui se ressemblent à première vue, mais qui fonctionnent très différemment en coulisses.

🔹 <b> – Puissance visuelle uniquement

<p>Ce produit est <b>très résistant</b>.</p>

• Met le texte en gras visuellement
• N’a aucune valeur sémantique
• Utilisée uniquement pour attirer l’œil

📌 Idéal pour les menus, les éléments d’interface ou les textes visibles mais non critiques.

🔹 <strong> – La balise « Attention ! »

<p><strong>Cette action est irréversible.</strong></p>

• Gras avec du sens
• Les lecteurs d’écran la prononcent avec insistance
• Plus pertinente pour le SEO

🧠 Astuce pratique :
Avertissements, informations importantes, messages critiques → strong

✨ <i> vs <em>

Texte en italique, mais avec une philosophie

🔹 <i> – Du style sans émotion

<p>Ce mot est <i>latin</i>.</p>

• Italique purement visuel
• Mots étrangers
• Titres de livres et de films

📖 Fréquemment utilisée dans les sites académiques et éditoriaux.

🔹 <em> – L’accent émotionnel

<p>Nous devons <em>vraiment</em> terminer ce travail.</p>

• Ajoute une emphase sémantique
• Les lecteurs d’écran modifient l’intonation
• Apporte de l’émotion à la phrase

🎭 On pourrait l’appeler la drama queen du HTML.

✏️ <u> – Souligné, mais avec prudence

<p>Ce mot est <u>particulièrement</u> mis en valeur.</p>

⚠️ Zone de danger :
Un texte souligné est souvent confondu avec un lien.

👉 Recommandation :

• À éviter sauf nécessité absolue
• Préférer d’autres styles via le CSS

🖍️ <mark> – L’effet surligneur

<p>Cette information <mark>tombera à l’examen</mark>.</p>

• Ajoute un fond jaune
• Attire immédiatement l’attention

📌 Cas d’usage courants :

• Résultats de recherche mis en évidence
• Notes importantes
• Contenus éducatifs

🎓 La façon HTML de dire : « Regarde ici ! »

🔍 <small> – Petit texte, grand rôle

<p>Frais d’abonnement : 99₺ <small>(mensuel)</small></p>

• Informations complémentaires
• Notes de bas de page
• Texte de pied de page

🧠 Astuce :
Petit ≠ insignifiant
Cela signifie information secondaire.

❌ <del> et ✅ <ins>

Supprimer le passé, insérer le nouveau

<p>
  <del>Ancienne version</del>
  <ins>Nouvelle version</ins>
</p>

• <del> → Contenu supprimé
• <ins> → Contenu ajouté

🛒 Parfait pour l’e-commerce, les changelogs et les notes de mise à jour.

💡 Avec un peu de CSS, l’impact est doublé.

🧪 <sub> et <sup>

Science, mathématiques et petits symboles

<p>Gaz CO<sub>2</sub></p>
<p>2<sup>3</sup> = 8</p>

• <sub> → Indice
• <sup> → Exposant

📐 Formules mathématiques
🧬 Équations chimiques
📊 Explications statistiques

🧱 Scénario réel (mini-projet)

<article>
  <h2><strong>Mise en forme du texte en HTML</strong></h2>

  <p>
    Cette leçon est <em>particulièrement</em>
    destinée aux <mark>débutants</mark>.
    <small>(À ne pas manquer)</small>
  </p>

  <p>
    <del>Mémoriser</del>
    <ins>Comprendre</ins>
  </p>
</article>

🎉 Ce code est :

• Sémantique
• Lisible
• Optimisé pour le SEO

🚫 Erreurs les plus courantes

❌ Mettre tout en gras avec <b>
❌ Utiliser des balises visuelles quand le sens est important
❌ Surligner chaque phrase avec <mark>
❌ Faire du style avec HTML et ignorer le CSS

🧠 Règles d’or (à sauvegarder)

• HTML → Que signifie ce contenu ?
• CSS → À quoi ressemble-t-il ?
• Sens requis → balises sémantiques
• Effet visuel requis → balises de style

🎯 Résumé clair et rapide