Exercice 3.3 · 6 min · 0 tentative
Le cœur de la page
🎯 Objectif
Entre la tête et les pieds, il y a le corps : organiser le contenu principal du site avec une balise <main> unique, découpée en <section> titrées.
📖 Exemple
La ludothèque du quartier organise sa page en deux thèmes :
<main>
<section>
<h2>Nos jeux</h2>
<p>Plus de 300 jeux de société à emprunter.</p>
</section>
<section>
<h2>Horaires</h2>
<p>Le mercredi et le samedi après-midi.</p>
</section>
</main>
Pourquoi ces deux balises ? <main> marque LE contenu principal — sa règle d'or : un seul par page, en-tête et menu restent dehors. Grâce à ce repère, une seule touche amène l'utilisateur d'un lecteur d'écran directement au contenu, sans réécouter le menu sur chaque page. Et <section> découpe l'intérieur en thèmes, comme les chapitres d'un livre — chaque chapitre ouvre sur son nom : un titre <h2>.
📝 Consigne
Le contenu du club est déjà écrit — même découpage, autres thèmes :
- Enveloppe les deux blocs dans le contenu principal de la page (l'en-tête reste dehors)
- « Le club » et son paragraphe forment une première section
- « Prochain match » et son paragraphe forment une seconde section, juste après
Résultat attendu
Le même contenu à l'écran — mais un arbre impeccable derrière. La checklist te le confirmera !
Ce qui est vérifié
- Créer un seul <main> sur la page
- Découper le <main> en deux <section>
- Donner son titre <h2> à chaque section
- Ouvrir la première section par « Le club »
- Consacrer la seconde section au prochain match
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)