En-tête, menu et pied de page

Donne à ta page une vraie structure comme les vrais sites web : un en-tête avec un menu en haut, et un pied de page en bas.

Montre-moi : chaque site web a les mêmes parties

Regarde n’importe quel grand site web : en haut il y a un en-tête avec un nom et un menu, au milieu il y a du contenu, et en bas il y a un pied de page avec les petits détails. HTML a des balises dédiées pour ces parties :

<body>
  <header>
    <h1>Website Name</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="second-page.html">Second Page</a>
    </nav>
  </header>

  <main>
    <h2>Here's the main content</h2>
    <p>Everything the page is about.</p>
  </main>

  <footer>
    <p>Made by Jake, 2026</p>
  </footer>
</body>

<header> – l’en-tête : le nom du site web et le menu. C’est pareil sur chaque page.
<nav> – la navigation, c’est-à-dire le menu avec des liens.
<main> – le contenu principal, différent sur chaque page.
<footer> – le pied de page : qui a fait le site, coordonnées, l’année.

💡

Visuellement, pas grand-chose ne changera pour l’instant – ces balises ne sont pas visibles en elles-mêmes. Alors pourquoi les écrire ? Parce qu’elles apportent de l’ordre à ton code : les navigateurs, les moteurs de recherche et les lecteurs d’écran les utilisent pour savoir ce qui est un menu et ce qui est du contenu. Et le mieux – dans les prochaines leçons on les stylisera, pour que le menu ressemble vraiment à un vrai menu.

À toi 💪

Sur index.html, enveloppe ton contenu existant dans ces parties : un <header> en haut avec un <h1> et un <nav> (liens vers tes deux pages), un <main> au milieu avec le reste du contenu, et un <footer> en bas.
Fais pareil sur ta deuxième page. L’en-tête et le pied de page doivent être exactement les mêmes sur les deux pages – copie-les simplement.
Enregistre, actualise, clique partout : le menu fonctionne-t-il depuis les deux pages ?

🏫 Site web d'école – solution (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <header>
      <h1>Riverside Elementary School</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="lunch-menu.html">Lunch Menu</a>
      </nav>
    </header>

    <main>
      <img src="images/school.jpg" alt="Our school building">
      <h2>About Our School</h2>
      <p>Our school has stood in Riverside for 120 years.</p>

      <h2>Clubs</h2>
      <ul>
        <li>floorball</li>
        <li>ceramics</li>
        <li>coding</li>
      </ul>
    </main>

    <footer>
      <p>Made by the 4th grade class, 2026</p>
    </footer>
  </body>
</html>

🙋 Site web personnel – solution (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <header>
      <h1>Jake Miller</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="about-me.html">More About Me</a>
      </nav>
    </header>

    <main>
      <img src="images/me.jpg" alt="Me with a soccer ball">
      <h2>What I Like</h2>
      <p>Soccer, Minecraft, and building websites.</p>
    </main>

    <footer>
      <p>Made by Jake, 2026</p>
    </footer>
  </body>
</html>

🌍 Journal de voyage – solution (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <header>
      <h1>Where We've Been 🌍</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="trips.html">All Trips</a>
      </nav>
    </header>

    <main>
      <h2>Last Trip: The Mountains</h2>
      <img src="images/mountains.jpg" alt="View from the summit">
      <p>Three days of walking, one wrong turn, and a hundred wild berries.</p>
    </main>

    <footer>
      <p>Journal kept by the Miller family, 2026</p>
    </footer>
  </body>
</html>

⚽ Site web de club – solution (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <header>
      <h1>Riverside Eagles FC</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="roster.html">Roster</a>
      </nav>
    </header>

    <main>
      <img src="images/team.jpg" alt="Team photo">
      <h2>Recent Results</h2>
      <ol>
        <li>Eagles – Hawks 3 : 1</li>
        <li>Falcons – Eagles 2 : 2</li>
      </ol>
    </main>

    <footer>
      <p>Riverside Eagles FC · training Tue & Thu at 5:00 PM</p>
    </footer>
  </body>
</html>

✅

Vérifie : Les deux pages ont le même nom et menu en haut, un pied de page en bas, et le menu te fait passer d’une page à l’autre. La structure est faite – maintenant on peut plonger dans l’apparence !

Ce que tu retiens de cette leçon

Une page a des parties : <header> (en-tête avec menu), <main> (contenu), <footer> (pied de page).
Le menu est un <nav> avec des liens, et il est pareil sur chaque page.
L’ordre dans ton code = la fondation sur laquelle tu peux construire un look.