Aller au contenu principal

Module HTML.3 – Balises de texte

Objectif​

Maîtriser toutes les balises de texte HTML : titres, paragraphes, mise en forme sémantique, et comprendre la différence entre <span> et <div> pour structurer le contenu textuel professionnellement.

Théorie​

Titres (h1–h6)​

Les titres créent une hiérarchie dans le document.

Hiérarchie :

<h1>Titre principal (1 seul par page)</h1>
<h2>Sous-titre de section</h2>
<h3>Sous-section</h3>
<h4>Niveau 4</h4>
<h5>Niveau 5</h5>
<h6>Niveau 6 (rarement utilisé)</h6>

Règles importantes :

  • ✅ Un seul <h1> par page (SEO et accessibilité)
  • ✅ Ne pas sauter de niveaux (h1 → h2 → h3, pas h1 → h3)
  • ✅ Les titres sont sémantiques, pas stylistiques
  • ✅ Utiliser CSS pour le style, pas les balises de titre

Exemple de structure :

<h1>Mon site web</h1>
  <h2>À propos</h2>
    <h3>Notre histoire</h3>
    <h3>Notre équipe</h3>
  <h2>Services</h2>
    <h3>Développement web</h3>
    <h3>Design</h3>

Paragraphes​

<p> : Paragraphe de texte.

<p>Ceci est un paragraphe de texte. Il peut contenir plusieurs phrases.</p>
<p>Ceci est un autre paragraphe séparé.</p>

Bonnes pratiques :

  • Un paragraphe = une idée
  • Ne pas imbriquer des <p> dans d'autres <p>
  • Utiliser <br> avec parcimonie (pour les retours à la ligne dans un poème, par exemple)

Retour à la ligne :

<!-- ❌ Mauvais : utiliser <br> partout -->
<p>Ligne 1<br>Ligne 2<br>Ligne 3</p>

<!-- ✅ Bon : utiliser plusieurs <p> -->
<p>Ligne 1</p>
<p>Ligne 2</p>
<p>Ligne 3</p>

span vs div​

<span> : Élément inline (dans le flux du texte)

<p>Ceci est un <span>texte important</span> dans un paragraphe.</p>

<div> : Élément block (bloc séparé)

<div>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
</div>

Différences :

  • <span> : Inline, pour styler une partie de texte
  • <div> : Block, pour grouper des éléments

Quand utiliser :

  • <span> : Pour styler un mot, une phrase dans un paragraphe
  • <div> : Pour créer des conteneurs, des sections

Exemple :

<!-- span : dans le texte -->
<p>Le prix est de <span class="prix">19,99 €</span>.</p>

<!-- div : conteneur -->
<div class="article">
    <h2>Titre</h2>
    <p>Contenu</p>
</div>

Mise en forme sémantique​

<strong> : Texte important (forte emphase)

<p>Ceci est <strong>très important</strong>.</p>

→ Rendu en gras par défaut, mais sémantique = important

<em> : Texte en emphase (italique)

<p>Ceci est <em>en emphase</em>.</p>

→ Rendu en italique par défaut, mais sémantique = emphase

<mark> : Texte surligné (HTML5)

<p>Ceci est <mark>surligné</mark>.</p>

<small> : Texte secondaire (mentions légales, etc.)

<small>© 2026 Mon site. Tous droits réservés.</small>

<del> : Texte supprimé

<p>Prix : <del>29,99 €</del> 19,99 €</p>

<ins> : Texte inséré

<p>Prix : <ins>19,99 €</ins></p>

<sub> et <sup>** : Indices et exposants

<p>H<sub>2</sub>O</p>
<p>E = mc<sup>2</sup></p>

Balises obsolètes à éviter​

❌ Ne plus utiliser :

<b>Gras</b>        <!-- Utiliser <strong> -->
<i>Italique</i>   <!-- Utiliser <em> -->
<u>Souligné</u>   <!-- Utiliser CSS -->
<font>Texte</font> <!-- Utiliser CSS -->
<center>Centré</center> <!-- Utiliser CSS -->

Pourquoi : Ces balises sont purement visuelles, pas sémantiques. Utiliser CSS pour le style.

Citations​

<blockquote> : Citation longue (block)

<blockquote cite="https://example.com">
    <p>Ceci est une citation longue qui sera indentée.</p>
    <footer>— Auteur, <cite>Source</cite></footer>
</blockquote>

<q> : Citation courte (inline)

<p>Comme disait <q>Le code est de la poésie</q>.</p>

<cite> : Titre d'une œuvre

<p>Lire <cite>Clean Code</cite> de Robert Martin.</p>

Code​

<code> : Code inline

<p>Utilisez <code>console.log()</code> pour débugger.</p>

<pre> : Code préformaté (block)

<pre><code>
function hello() {
    console.log('Hello World!');
}
</code></pre>

<kbd> : Touches de clavier

<p>Appuyez sur <kbd>Ctrl</kbd> + <kbd>C</kbd> pour copier.</p>

Abréviations et définitions​

<abbr> : Abréviation

<p>Le <abbr title="World Wide Web">WWW</abbr> a été créé en 1991.</p>

<dfn> : Terme défini

<p>Le <dfn>HTML</dfn> est un langage de balisage.</p>

Exercices guidés​

Exercice 1 : Hiérarchie des titres​

Créez une page avec une structure de titres correcte :

<h1>Mon site web</h1>
<h2>À propos</h2>
<h3>Notre histoire</h3>
<h3>Notre équipe</h3>
<h2>Services</h2>
<h3>Développement</h3>
<h3>Design</h3>

Vérifiez qu'il n'y a qu'un seul <h1> et que les niveaux sont logiques.

Exercice 2 : Mise en forme sémantique​

Créez un paragraphe avec :

  • Texte en <strong>
  • Texte en <em>
  • Texte surligné avec <mark>
  • Une abréviation avec <abbr>

Exercice 3 : span vs div​

Créez :

  1. Un paragraphe avec un <span> pour styler un mot
  2. Un <div> qui contient plusieurs paragraphes

Comprenez la différence visuelle (inline vs block).

Exercice 4 : Citations et code​

Créez :

  1. Une citation avec <blockquote>
  2. Du code avec <pre><code>
  3. Des touches de clavier avec <kbd>

Exercice 5 : Structure complète​

Créez un article de blog avec :

  • Un titre <h1>
  • Des sous-titres <h2>
  • Des paragraphes <p>
  • De la mise en forme sémantique
  • Une citation
  • Du code

❌ Erreurs fréquentes​

Erreur 1 : Plusieurs h1 par page​

❌ Mauvais :

<h1>Titre 1</h1>
<h1>Titre 2</h1>

✅ Bon :

<h1>Titre principal</h1>
<h2>Titre de section</h2>

Pourquoi : Un seul <h1> par page pour le SEO et l'accessibilité.

Erreur 2 : Sauter des niveaux​

❌ Mauvais :

<h1>Titre</h1>
<h3>Sous-titre</h3> <!-- Sauté h2 -->

✅ Bon :

<h1>Titre</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

Pourquoi : Structure logique pour l'accessibilité.

Erreur 3 : Utiliser b et i au lieu de strong et em​

❌ Mauvais :

<p>Ceci est <b>important</b> et <i>en emphase</i>.</p>

✅ Bon :

<p>Ceci est <strong>important</strong> et <em>en emphase</em>.</p>

Pourquoi : <strong> et <em> sont sémantiques, <b> et <i> sont purement visuels.

Erreur 4 : Confondre span et div​

❌ Mauvais :

<p>Texte <div>important</div> ici.</p>
<!-- div est block, casse le flux -->

✅ Bon :

<p>Texte <span>important</span> ici.</p>
<!-- span est inline, reste dans le flux -->

Pourquoi : <div> est block et casse le flux du texte.

Erreur 5 : Utiliser br pour espacer​

❌ Mauvais :

<p>Ligne 1<br><br>Ligne 2</p>

✅ Bon :

<p>Ligne 1</p>
<p>Ligne 2</p>

Pourquoi : Utiliser CSS pour l'espacement, pas <br>.

🚀 Mini-projet​

Mission : Créer un article de blog complet

Créez un fichier article.html avec :

Structure :

  1. Un <h1> : Titre de l'article
  2. Un paragraphe d'introduction avec mise en forme (<strong>, <em>)
  3. Plusieurs sections avec <h2>
  4. Des paragraphes avec du contenu varié
  5. Une citation avec <blockquote>
  6. Du code avec <pre><code>
  7. Des abréviations avec <abbr>
  8. Un <small> pour les mentions légales

Critères :

  • ✅ Un seul <h1>
  • ✅ Hiérarchie logique des titres
  • ✅ Mise en forme sémantique (strong, em, mark)
  • ✅ Utilisation correcte de span et div
  • ✅ Citations et code formatés
  • ✅ Structure HTML valide

Objectif : Maîtriser toutes les balises de texte et créer un contenu structuré professionnellement.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les balises de texte et pouvez créer un article structuré avec une hiérarchie correcte.