RM Partie 3 : Structure sémantique et organisation

Partie 3 — Structure sémantique et organisation

1) Objectifs pédagogiques

choisir entre <div> et les balises sémantiques HTML5 ;
structurer correctement une page et un article avec en-tête, contenu principal, navigation, zones complémentaires et pied de page ;
comprendre l’impact de la sémantique pour l’accessibilité (repères ARIA implicites) et le SEO ;
organiser une hiérarchie de titres cohérente et éviter les erreurs d’imbrication.

2) `<div>` vs balises sémantiques : quand utiliser quoi ?

2.1 `<div>` : conteneur générique

Sans signification sémantique : juste un bloc pour regrouper du contenu et appliquer du style (CSS) ou des hooks JS.
À utiliser si aucune balise sémantique ne correspond au rôle du contenu.
Évite le « divitis » (empilement inutile de <div>).

<div class="carte-produit">
  <h3>Stagiaire HTML – Promo 2025</h3>
  <p>Description…</p>
</div>

2.2 Les balises sémantiques HTML5 (landmarks et sections)

<header> : contenu introductif d’une section (logo, titre, accroche, intro, outils associés). Peut exister au niveau de la page et à l’intérieur d’un <article>/<section>.
<footer> : infos de fin de section (auteur, date, liens connexes, ©, mentions). Peut exister au niveau de la page et dans chaque article/section.
<main> : contenu principal unique de la page (une seule occurrence, pas imbriquée). Doit exclure header, footer, nav, etc.
<nav> : bloc de navigation principale ou importante (menu global, pagination, table des matières). Ne pas l’utiliser pour un simple lien isolé.
<article> : contenu autonome et potentiellement réutilisable/partageable (billet, carte d’actualité, commentaire indépendant, fiche, post de blog).
<section> : groupement thématique avec un titre (sous-partie d’un article, chapitre, section d’une page). Si tu n’as pas de titre pertinent, garde un <div>.
<aside> : contenu connexe/complémentaire au contenu principal (barre latérale, encadré, glossaire, pub, mini-bio d’auteur).

Règle d’or : si une balise sémantique décrit le rôle du contenu, préfère-la à <div>.

3) Accessibilité & SEO : pourquoi la sémantique compte

3.1 Landmarks ARIA implicites

Les balises sémantiques exposent des repères (landmarks) aux technologies d’assistance :

<header> (en-tête de la page principale peut être interprété comme banner si premier en-tête de la page)
<main> ⇒ rôle main
<nav> ⇒ rôle navigation
<aside> ⇒ rôle complementary
<footer> (pied de page principal) ⇒ rôle contentinfo
<article> ⇒ rôle article
<section> ⇒ rôle region uniquement si elle a un nom accessible (titre visible ou aria-label/aria-labelledby)

Conséquence : un lecteur d’écran peut lister et sauter directement aux repères, comme nous le faisons visuellement.

3.2 Bonnes pratiques d’accessibilité

Un seul <main> par page, non imbriqué.

Donne un titre à chaque <section> ou fournis un nom accessible :

<section aria-labelledby="faq-title">
  <h2 id="faq-title">FAQ</h2>
  …
</section>

Prévois un lien d’évitement (skip link) tout en haut :

<a href="#contenu" class="skip">Aller au contenu</a>
…
<main id="contenu">…</main>

Des liens explicites : “Voir les tarifs” > “Clique ici”.
Ne duplique pas les rôles ARIA quand la balise a déjà un rôle implicite (évite role="navigation" sur un <nav>).

3.3 SEO (référencement)

Les balises sémantiques aident à comprendre la structure (titres, sections, liens de nav, contenu principal).
Qualité du contenu, liens entrants, performances restent déterminants ; la sémantique ne remplace pas ces critères, mais elle favorise l’analyse.
Hiérarchie de titres claire : un <h1> principal (recommandé), puis <h2>, <h3>, etc.

4) Imbrication et hiérarchie

4.1 Principes d’imbrication

Tu peux avoir plusieurs <header>/<footer> si chacun se rapporte à une section différente (page, article, section…).
Un seul <main> par page (non imbriqué, pas dans un <article>).
<nav> peut apparaître au sommet (menu global) ou localement (pagination d’un article, table des matières).
<article> peut contenir ses propres <header>, <footer>, <section> et titres.

4.2 Hiérarchie de titres

Pense en chapitres et sous-chapitres :
- Page → <h1>
- Sections principales → <h2>
- Sous-sections → <h3> (et ainsi de suite)
Techniquement, on peut mettre plusieurs <h1> si on considère chaque article autonome, mais pour la plupart des outils et lecteurs, une seule balise <h1> globale reste une pratique claire et simple. À l’intérieur d’un article, commence plutôt à <h2> ou <h3> selon la position.

4.3 Quand utiliser `<section>` ?

Uniquement si la portion a un intitulé sémantique (titre ou nom accessible).
Pour des regroupements purement visuels ou techniques (grilles, colonnes), utilise <div>.

5) Patrons (patterns) utiles

5.1 Squelette de page sémantique

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

    <a href="#main" class="skip">Aller au contenu</a>

    <header>
      <h1>Nom du site</h1>
      <p>Sous-titre / slogan</p>
      <nav aria-label="Navigation principale">
        <ul>
          <li><a href="/">Accueil</a></li>
          <li><a href="/articles">Articles</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main id="main">
      <!-- Contenu principal de la page -->
      <article>
        <header>
          <h2>Titre de l’article</h2>
          <p>Publié le <time datetime="2025-09-06">6 septembre 2025</time></p>
        </header>

        <section>
          <h3>Contexte</h3>
          <p>Texte d’introduction…</p>
        </section>

        <section>
          <h3>Développement</h3>
          <p>Texte…</p>
        </section>

        <footer>
          <p>Auteur : <a href="/auteurs/manuel">Manuel</a></p>
        </footer>
      </article>

      <aside aria-labelledby="encadre">
        <h2 id="encadre">À retenir</h2>
        <p>Résumé, glossaire, lien connexe…</p>
      </aside>
    </main>

    <footer>
      <p>© 2025 — Mon site. <a href="/mentions-legales">Mentions légales</a></p>
    </footer>
  </body>
</html>

5.2 Liste d’articles (page d’index)

<main id="main">
  <h1>Actualités</h1>

  <article>
    <header>
      <h2>Nouvelle version</h2>
      <p>Le <time datetime="2025-08-30">30/08/2025</time></p>
    </header>
    <p>Résumé… <a href="/article/nouvelle-version">Lire la suite</a></p>
  </article>

  <article>
    <header>
      <h2>Entretien avec…</h2>
      <p>Le <time datetime="2025-08-20">20/08/2025</time></p>
    </header>
    <p>Résumé… <a href="/article/entretien">Lire la suite</a></p>
  </article>
</main>

5.3 Navigation locale (pagination)

<nav aria-label="Pagination">
  <ul>
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2" aria-current="page">2</a></li>
    <li><a href="?page=3">3</a></li>
  </ul>
</nav>

6) Pièges fréquents

Mettre <section> sans titre : préfère <div>.
Multiplier les <nav> pour des liens qui n’en sont pas (ex. deux liens isolés) → un simple paragraphe ou une liste suffit.
Plusieurs <main> (à éviter) ou <main> imbriqué.
Redonder les rôles ARIA (inutile de faire role="navigation" sur <nav>).
Utiliser <header>/<footer> juste pour styler ; sers-toi-en pour le rôle (intro/fin de section).
Mauvaise hiérarchie de titres (sauter de <h1> à <h4> sans raison).
Mettre tout en <div> alors que des balises sémantiques existent.

7) Exercice (avec énoncé clair)

But : Structurer un mini-article avec <header>, <nav>, <article>, <footer>.

Consignes

Crée un fichier mini-article.html avec la structure HTML de base (doctype, html lang, head avec charset + viewport, body).
En haut de page, ajoute un <header> contenant :
- un <h1> pour le nom du site ;
- un <nav aria-label="Navigation principale"> avec une liste de liens (Accueil, Articles, Contact).
Dans <main id="contenu">, ajoute un unique <article> avec :
- un <header> d’article (un <h2> titre d’article + date avec <time>),
- deux sections (<section>), chacune avec un <h3> et un paragraphe,
- un <footer> d’article avec l’auteur.
Après l’article, ajoute un <aside> avec un titre (via <h2> ou aria-label) contenant une astuce ou un résumé.
Tu peux ajouter un lien d’évitement en tout début de body : <a href="#contenu">Aller au contenu</a>.

Contraintes : un seul <main>, des titres hiérarchiques cohérents, aria-label si nécessaire, pas de rôles ARIA redondants.

8) Corrigé possible (référence)

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Mon site — Mini-article</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

    <a href="#contenu" class="skip">Aller au contenu</a>

    <header>
      <h1>Mon site</h1>
      <nav aria-label="Navigation principale">
        <ul>
          <li><a href="/">Accueil</a></li>
          <li><a href="/articles">Articles</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main id="contenu">
      <article>
        <header>
          <h2>Structurer avec HTML5</h2>
          <p>Publié le <time datetime="2025-09-06">6 septembre 2025</time></p>
        </header>

        <section>
          <h3>Pourquoi la sémantique ?</h3>
          <p>Les balises sémantiques décrivent le rôle du contenu, ce qui améliore l’accessibilité,
             la navigation par repères et la compréhension par les moteurs de recherche.</p>
        </section>

        <section>
          <h3>Div vs balises sémantiques</h3>
          <p>Utilise <code><div></code> si aucune balise sémantique ne convient.
             Préfère <code><article></code>, <code><section></code>, <code><nav></code>, etc.
             lorsque le rôle est identifiable.</p>
        </section>

        <footer>
          <p>Auteur : <a href="/auteurs/manuel">Manuel Regamey</a></p>
        </footer>
      </article>

      <aside aria-labelledby="note">
        <h2 id="note">À noter</h2>
        <p>Chaque section devrait avoir un titre ; <code><main></code> est unique ; évite les rôles ARIA redondants.</p>
      </aside>
    </main>

    <footer>
      <p>© 2025 — Mon site. <a href="/mentions-legales">Mentions légales</a></p>
    </footer>

  </body>
</html>

9) Mini-quiz

Quand utiliser <article> plutôt que <section> ?
Peut-on avoir plusieurs <header> dans une page ? Et plusieurs <main> ?
Un <section> sans titre est-il approprié ? Pourquoi ?
Quel attribut d’accessibilité donner à une <section> sans titre visible pour qu’elle soit un repère nommé ?
Faut-il ajouter role="navigation" sur un <nav> ?
Donne un exemple de lien d’évitement.
Pourquoi les balises sémantiques sont-elles utiles pour l’accessibilité et le SEO ?

Corrigé (bref)

<article> pour un contenu autonome partageable (billet, carte, fiche) ; <section> pour un groupement thématique d’une plus grande unité.
Autant de <header> que de sections ; un seul <main> par page, non imbriqué.
Non : <section> doit avoir un titre ; sinon, utiliser <div>.
aria-label="Nom de la section" ou aria-labelledby="id-d-un-titre".
Non, <nav> a déjà un rôle implicite ; inutile de le redéclarer.
<a href="#contenu">Aller au contenu</a> placé tout au début du body.
Elles exposent des repères et une structure claire (meilleure navigation pour les lecteurs d’écran ; meilleure compréhension de la page par les moteurs).

10) Fiche-mémo

Préfère la sémantique : <header>, <footer>, <main>, <nav>, <article>, <section>, <aside>.
<div> : conteneur générique quand aucune balise sémantique ne convient.
<main> : unique, non imbriqué.
<section> : groupement thématique avec titre ; sinon, <div>.
<article> : contenu autonome ; peut contenir ses propres header/footer/sections.
Landmarks (rôles implicites) : main, navigation, contentinfo, complementary, etc.
Accessibilité : skip link, titres hiérarchiques, noms accessibles (aria-label/aria-labelledby), pas de rôles ARIA redondants.
SEO : structure claire (titres/sections), contenu pertinent, nav cohérente.