Éléments sémantiques et structure de page

Objectifs

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

• structurer une page avec les régions sémantiques : header, nav, main, section, article, footer ;
• choisir l'élément juste : titres hiérarchisés, paragraphes, listes, tableaux, insistance ;
• expliquer pourquoi la sémantique n'est pas décorative — accessibilité, SEO, maintenance.

🔗 Pour vous rafraîchir la mémoire : la structure d'un document HTML

Le squelette sémantique d'une page moderne

Voici le plan type d'une vraie page — chaque balise nomme une RÉGION :

<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>

Région	Rôle	Règle
header	en-tête de page ou de section (logo, titre)	peut exister plusieurs fois
nav	bloc de navigation principale	réservé aux groupes de liens majeurs
main	contenu PRINCIPAL de la page	unique par page
section	regroupement thématique	porte généralement un titre
article	contenu autonome (un post, un produit)	détachable sans perdre son sens
footer	pied de page/section	méta-informations

Avant HTML5 (2014), tout cela était des <div class="header">, <div id="nav">... des conteneurs anonymes dont seul le nom de classe suggérait le rôle. Les éléments sémantiques ont déplacé cette information dans LE LANGAGE lui-même.

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

Trois bénéfices concrets, du plus humain au plus quotidien :

1. Accessibilité. Un lecteur d'écran ne « lit » pas la page bêtement : il propose de naviguer PAR RÉGIONS (« sauter au contenu principal », « liste des repères ») grâce à nav, main, footer. Une page en divs anonymes est un labyrinthe pour ces utilisateurs ; une page sémantique est un bâtiment signalé ;
2. SEO. Les moteurs de recherche interprètent la structure : le h1 pèse comme sujet principal, le contenu de main prime sur celui du footer. Une bonne sémantique est du référencement gratuit ;
3. Maintenabilité. Relire votre code dans six mois : <footer> se comprend instantanément ; <div class="bas-de-page-2"> exige une fouille. La sémantique est de la documentation gratuite et non-dissociable du code.

Les éléments de contenu, avec leur contrat

<h1>Titre unique de la page</h1>   <!-- UN SEUL h1 par page -->
<h2>Sous-titre de section</h2>
<h3>Sous-sous-titre</h3>           <!-- jamais de saut h2 → h4 -->
<p>Un paragraphe.</p>

<ul>
  <li>Pain</li>
  <li>Lait</li>                    <!-- liste NON ordonnée : l'ordre importe peu -->
</ul>

<ol>
  <li>Préchauffer le four</li>
  <li>Mélanger</li>                <!-- liste ORDONNÉE : l'ordre EST l'information -->
</ol>

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

<strong>important</strong>          <!-- importance réelle -->
<em>accentué</em>                   <!-- emphase (changement de ton) -->

Trois contrats à respecter :

• Hiérarchie de titres cohérente : un seul h1 (le sujet de la page), puis descente sans saut (h2 → h3). C'est un plan de document, pas une échelle de tailles ;
• Liste ordonnée ou pas ? Posez-vous LA question : si je mélangeais les items, le sens changerait-il ? Recette → oui (ol) ; courses → non (ul) ;
• Tableaux = données tabulaires uniquement. Jamais pour faire de la mise en page — c'était la plaie des années 2000 et ça casse l'accessibilité.

div et span : les neutres assumés

Il reste deux conteneurs sans sémantique :

• <div> : conteneur de BLOC — regrouper pour styler ou positionner ;
• <span> : conteneur EN LIGNE — marquer un fragment DANS un texte.

Ils sont légitimes... pour la présentation pure. La règle de décision :

Si un élément sémantique existe pour ce rôle → utilisez-le. Sinon → div/span sans culpabilité.

Le piège inverse existe aussi : sémantiser à outrance (<section> pour trois lignes quelconques) dilue justement le sens des régions réelles. La sémantique est une économie de signification : dépensez-la là où ça compte.

Exercice

1. Reprenez votre page.html et restructurez-la : header/nav/main/footer, avec deux sections thématiques dans main.
2. Ajoutez un tableau à deux colonnes (jour / tâche) avec trois lignes, correctement découpé en thead/tbody.
3. Dans un paragraphe, marquez un mot important (<strong>) et une citation longue (<blockquote>).
4. Question d'audit : ouvrez une page web quelconque en DevTools et cherchez ses régions (main, nav...). Sémantique ou soupe de divs ?

Résumé

• header/nav/main/footer/section/article : les régions nommées de la page ; main unique.
• Titres = plan hiérarchisé (h1 unique), listes selon l'importance de l'ordre, tableaux pour données.
• strong/em portent du sens ; div/span restent pour la présentation pure.
• La sémantique sert d'abord les lecteurs d'écran, puis le SEO, puis votre future relecture.

<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>