Éléments sémantiques et structure de page

header, nav, main, footer, listes et tableaux.

◷ 25 minutesTravail sur votre machine

Objectifs

À la fin de cette leçon, vous saurez :

structurer une page avec header, nav, main, section, footer ;
choisir les bons éléments : titres, paragraphes, listes, tableaux ;
comprendre pourquoi la sémantique compte.

Le squelette sémantique d'une page moderne

<body>
  <header>
    <h1>Mon site</h1>
    <nav>
      <a href="/">Accueil</a>
      <a href="/cours">Cours</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Derniers articles</h2>
      <article>
        <h3>Apprendre HTML</h3>
        <p>Le HTML structure le contenu…</p>
      </article>
    </section>
  </main>

  <footer>
    <p>© 2026 Mon site</p>
  </footer>
</body>

Chaque balise dit son rôle : header pour l'en-tête, nav pour la navigation, main (unique par page) pour le contenu principal, footer pour le pied. Avant ces balises (HTML5), tout était des <div> anonymes.

Pourquoi la sémantique n'est pas décorative

Accessibilité : les lecteurs d'écran naviguent par régions (« aller au contenu principal ») grâce à ces balises.
SEO : les moteurs comprennent mieux une page structurée.
Maintenabilité : <footer> se lit ; <div class="bas-de-page-2"> non.

Les éléments de contenu

<h1>Titre unique de page</h1>       <!-- un seul h1 par page -->
<h2>Sous-titre</h2>
<p>Un paragraphe.</p>

<ul>
  <li>Pain</li>
  <li>Lait</li>                     <!-- liste non ordonnée -->
</ul>

<ol>
  <li>Préchauffer</li>
  <li>Mélanger</li>                 <!-- liste ordonnée : l'ordre compte -->
</ol>

<table>
  <tr><th>Nom</th><th>Âge</th></tr> <!-- th = cellule d'en-tête -->
  <tr><td>Ana</td><td>21</td></tr>
</table>

<strong>important</strong>          <!-- importance réelle -->
<em>accentué</em>

Règle d'or : choisissez l'élément selon le sens, jamais selon le rendu visuel (c'est le travail du CSS). Une liste de courses est un <ul> même si vous voulez des puces carrées.

Exercice

Reprenez votre page.html et restructurez-la avec header/nav/main/footer.
Ajoutez un tableau à deux colonnes (jour / tâche) avec trois lignes.
Marquez dans un paragraphe un mot important avec <strong> et une citation avec <blockquote>.

Résumé

header/nav/main/footer décrivent les régions de la page.
Chaque élément porte du sens avant tout rendu.
h1 unique, hiérarchie de titres cohérente, listes et tableaux pour leurs usages propres.

Correction disponibleCherchez d’abord par vous-même.Voir la correction

Correction

Point de vigilance sur l'exercice 2

Structure attendue :

<table>
  <thead>
    <tr><th>Jour</th><th>Tâche</th></tr>
  </thead>
  <tbody>
    <tr><td>Lundi</td><td>Terminal</td></tr>
    <tr><td>Mardi</td><td>Git</td></tr>
    <tr><td>Mercredi</td><td>HTTP</td></tr>
  </tbody>
</table>

thead/tbody précisent la sémantique (et permettent aux navigateurs de répéter l'en-tête lors des impressions longues).