HTML Academy · Leçon

Paragraphes, em, strong, b et i

Balisez la prose avec une emphase sémantique et des balises de mise en gras.

Paragraphes, em, strong, b et i est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

L’élément paragraphe

L’élément  indique qu’un bloc de texte est un paragraphe :

<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>

Emphase sémantique : em

L’élément  marque un texte avec une emphase prosodique — le mot qui modifie le sens de la phrase :

<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->

Importance sémantique : strong

L’élément  marque un texte comme particulièrement important :

<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->

em et i

 et  affichent tous deux du texte en italique par défaut, mais leur sens diffère :

 — emphase sémantique (à utiliser le plus souvent)
 — italique de mise en forme : termes techniques, titres, expressions étrangères

<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>

strong et b

 et  affichent tous deux du texte en gras par défaut, mais diffèrent sur le plan sémantique :

 — importance sémantique (à utiliser le plus souvent)
 — attire l’attention sans suggérer une importance particulière : mots-clés, noms de produits

<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>

Imbriquer em et strong

Vous pouvez imbriquer les éléments d’emphase pour combiner leurs effets :

<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->

Les paragraphes ne peuvent pas être imbriqués

Un élément  ne peut pas contenir un autre  :

<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>

<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>

Éléments en ligne et de niveau bloc dans les paragraphes

 est un élément de niveau bloc qui ne peut contenir que des éléments en ligne :

<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>

<!-- INVALID: block element inside p -->
<p>
  <div>A div inside p is invalid</div>
</p>

Accessibilité de l’emphase

Pourquoi le balisage sémantique est important pour les technologies d’assistance :

Les lecteurs d’écran annoncent parfois  avec une intonation différente selon leur implémentation
 peut être lu avec une emphase supplémentaire
Le gras ou l’italique appliqué uniquement avec CSS (par exemple font-style: italic sur un span) n’a aucune signification sémantique pour les lecteurs d’écran

Erreurs fréquentes

Évitez ces erreurs fréquentes de balisage du texte :

<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph

<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Bad: bold for visual style only -->
<b>Heading Text</b>

<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>

Quand utiliser chaque élément

Guide de décision rapide :

Un bloc de texte suivi → 
Mettre en relief un mot qui change le sens → 
Marquer une information essentielle → 
Mettre un titre ou un terme technique en italique → 
Attirer l’attention sur un mot-clé sans suggérer une importance particulière →

Vérification rapide

Quel élément devez-vous utiliser pour marquer un texte comme particulièrement important ?

Récapitulatif : sémantique du texte

Résumé du balisage du texte :

 — paragraphes de texte suivi
 — emphase prosodique, modifie le sens de la phrase
 — importance particulière
 — italique de mise en forme (titres, termes)
 — attire l’attention sans exprimer une importance particulière
N’utilisez jamais   pour espacer les paragraphes

Questions Fréquemment Posées

La leçon « Paragraphes, em, strong, b et i » est-elle gratuite ?

Oui — le texte complet de « Paragraphes, em, strong, b et i » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Paragraphes, em, strong, b et i » ?

Balisez la prose avec une emphase sémantique et des balises de mise en gras. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Paragraphes, em, strong, b et i » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à HTML Academy