Deux boîtes à tout faire

🎯 Objectif

Découvrir les deux boîtes neutres du HTML : <div> pour grouper des blocs, <span> pour cibler un morceau de phrase — et voir de tes yeux la différence entre bloc et inline.

📖 Exemple

Commence par observer ces deux balises en action — on a tracé le contour des boîtes et surligné le span avec un brin de CSS, juste pour les rendre visibles (écrire ça toi-même, c'est le programme du prochain module) :

<div>Je suis une boîte bloc.</div>
<div>Moi aussi — chacune sa ligne !</div>
<p>Et moi je suis un <span>span</span> : je reste dans la phrase.</p>

div {
  border: 2px solid teal;
  margin-bottom: 8px;
}

span {
  background-color: gold;
}

Les contours parlent d'eux-mêmes : chaque <div> occupe toute la largeur — même quand son texte est court — et pousse la suite à la ligne : c'est une balise bloc. Le <span> surligné, lui, se fond dans la phrase sans rien casser : c'est une balise inline. Retire le CSS de démonstration, et il ne reste... rien : ces boîtes sont sans sens et sans effet par elles-mêmes.

À quoi bon, alors ? Ces boîtes sont des poignées pour le CSS : dès le prochain module, tu t'en serviras pour décorer un groupe de blocs ou mettre un mot en évidence. La chorale du village prépare déjà son tableau d'affichage : chaque petite note part dans sa boîte, en attendant sa décoration :

<div>
  <p>🎵 Pense à ta partition</p>
  <p>Les photocopies, c'est fini.</p>
</div>

Une dernière chose, et elle est importante : si une balise a du sens pour ton contenu — <header>, <nav>, <section> — c'est elle qu'il faut. La <div> et le <span>, c'est seulement quand aucune balise sémantique ne convient.

📝 Consigne

Le tableau d'affichage du FC Courtételle a deux petites notes. La première est déjà dans sa boîte — à toi de finir le travail :

1. Groupe la deuxième note (ses deux paragraphes) dans sa propre boîte <div>
2. Enveloppe le prix 2 francs dans un <span> — il sera mis en évidence au prochain module, comme sur une vraie carte de buvette
3. Regarde l'aperçu : rien ne bouge... et c'est normal !