DébutantNon commencé

Exercice 3.6 · 8 min · 0 tentative

Opération dé-div-ification

🎯 Objectif

Refactorer une vraie page : remplacer une soupe de <div> par les balises sémantiques du module. Zéro <div> à l'arrivée !

📖 Exemple

Tu connais la <div> : une boîte sans aucun sens. Avant HTML5, tout le web était construit à coups de <div class="pied-de-page"> — le nom de classe compensait une balise muette. La chorale du village vient de moderniser sa page. Avant :

<div class="pied-de-page">
  <p>© 2026 La Chorale du Village</p>
</div>

Après :

<footer>
  <p>© 2026 La Chorale du Village</p>
</footer>

Pourquoi ce remplacement, invisible à l'écran ? Une classe est un mot inventé par le développeur ; une balise sémantique est un standard que navigateurs, lecteurs d'écran et moteurs de recherche connaissent tous. Trois gestes à chaque fois : la balise ouvrante change, la balise fermante change aussi, et la classe devenue inutile disparaît — le contenu, lui, ne bouge pas.

📝 Consigne

Un bénévole du club a écrit sa page... tout en <div>. Le contenu est bon, la structure est muette. Applique les mêmes améliorations à chacun des quatre blocs :

  1. Remplace chaque <div class="..."> par la balise sémantique qui correspond au rôle décrit par sa classe
  2. Change aussi chaque balise fermante — le piège classique !
  3. Supprime les attributs class devenus inutiles

Résultat attendu

La même page à l'écran... mais plus une seule <div> dans le code. La checklist compte pour toi !

Ce qui est vérifié

  • Ne laisser aucune <div> dans la page
  • Transformer l'en-tête en <header>
  • Garder le club dans son en-tête
  • Transformer le menu en <nav>
  • Transformer le contenu principal en <main>
  • Transformer le pied de page en <footer>
  • Supprimer les attributs class devenus inutiles
  • Écrire un code HTML bien formé
  • Respecter la structure de la page (doctype, head, body)

Indices (0/3)

Indice 1 verrouillé
Indice 2 verrouillé
Indice 3 verrouillé