Les balises sémantiques et le plan de la page

Imaginez un magasin sans panneaux : ni « entrée », ni « rayon fruits », ni « caisse ». Vous trouveriez les produits, mais vous perdriez du temps. Une page écrite uniquement avec des boîtes anonymes ressemble à ce magasin. Les balises sémantiques sont les panneaux de votre page : elles disent à vos visiteurs, aux lecteurs d’écran et aux moteurs de recherche à quoi sert chaque zone. Dans cette leçon, vous allez structurer la page de Camille proprement.

Sémantique : donner du sens aux blocs

Le mot « sémantique » désigne le sens. Un élément sémantique décrit son rôle, pas son apparence. Les éléments neutres div (bloc) et span (texte en ligne) ne disent rien : ils servent de conteneurs quand aucun élément plus précis ne convient. À l’inverse, header, nav, main ou footer annoncent clairement leur fonction.

Utiliser les bons éléments procure trois avantages :

• Accessibilité : les lecteurs d’écran proposent de sauter d’une zone à l’autre (menu, contenu principal, pied de page). Sans balises sémantiques, cette navigation est impossible.
• Référencement : les moteurs de recherche comprennent mieux la structure et repèrent le contenu principal.
• Maintenance : votre code est plus lisible pour vous et pour ceux qui le reprendront. Comparez <div class="menu"> et <nav>.

Les éléments structurants

section ou article ?

C’est la confusion la plus fréquente. Posez-vous la question : ce bloc aurait-il du sens s’il était publié seul, par exemple dans un fil d’actualités ? Si oui, c’est un article (un projet de photo avec son titre et sa description). Sinon, et s’il s’agit d’un chapitre thématique de la page (« Mes projets », « À propos »), c’est une section. Quand le regroupement est purement visuel, sans titre, utilisez une div.

Un exemple complet : la page de Camille

<body>
  <header>
    <h1>Camille Morel</h1>
    <p>Photographe paysages et portraits</p>
    <nav aria-label="Navigation principale">
      <ul>
        <li><a href="#projets">Projets</a></li>
        <li><a href="#a-propos">À propos</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="projets">
      <h2>Projets</h2>
      <article>
        <h3>Les Alpes en hiver</h3>
        <p>Une série réalisée sur trois semaines.</p>
      </article>
      <article>
        <h3>Portraits d’artisans</h3>
        <p>Rencontres dans des ateliers de la région.</p>
      </article>
    </section>

    <section id="a-propos">
      <h2>À propos</h2>
      <p>Je photographie depuis dix ans.</p>
      <aside>
        <p>Disponible pour des missions dans toute la France.</p>
      </aside>
    </section>
  </main>

  <footer>
    <p>&copy; Camille Morel – Tous droits réservés</p>
  </footer>
</body>

Remarquez que les liens du menu utilisent des ancres (#projets) qui correspondent aux attributs id des sections. L’attribut aria-label sur nav donne un nom à la zone : utile lorsque la page contient plusieurs navigations. Nous reparlerons d’ARIA au chapitre 5.

Dessiner le plan de la page

Avant d’écrire du HTML, esquissez la page sur papier en repérant les grandes zones : en-tête, navigation, contenu principal et ses parties, éventuel encart, pied de page. Chaque zone devient alors un élément sémantique. Ce « plan » correspond à ce que les technologies d’assistance appellent des repères (landmarks) : bannière, navigation, contenu principal, information complémentaire, pied de page.

Vérifiez aussi le plan de vos titres. Lisez-les seuls, de haut en bas : ils devraient former une table des matières cohérente. Sur la page de Camille : « Camille Morel » (h1), « Projets » (h2), « Les Alpes en hiver » (h3), « Portraits d’artisans » (h3), « À propos » (h2). Aucun niveau n’est sauté.

D’autres éléments qui portent du sens

• <address> : coordonnées de contact de l’auteur de la page ou de l’article ;
• <time datetime="2025-01-15">15 janvier 2025</time> : une date ou une heure lisible par les machines ;
• <figure> et <figcaption> : une illustration légendée ;
• <details> et <summary> : un contenu repliable, sans JavaScript ;
• <button> : une action (et non un lien a déguisé) ;
• <ul> : une liste de liens de menu, pour que l’on sache combien il y a d’entrées.

Un test simple : lire la page sans style

Pour vérifier la qualité d’une structure, imaginez la page débarrassée de toute mise en forme. Le texte est-il compréhensible dans l’ordre où il est écrit ? Le menu vient-il avant le contenu, le pied de page à la fin ? Les titres racontent-ils l’histoire de la page ? C’est exactement l’expérience d’une personne qui utilise un lecteur d’écran : elle entend le contenu dans l’ordre du code source, pas dans l’ordre où le CSS le dispose visuellement.

Gardez donc à l’esprit une règle d’or : l’ordre du HTML doit être l’ordre logique de lecture. On peut tout réorganiser visuellement avec CSS, mais le code source, lui, doit rester cohérent.

Les erreurs fréquentes

• La « soupe de div » : des dizaines de conteneurs anonymes imbriqués, sans aucun élément qui dise à quoi ils servent.
• Des section sans titre, utilisées à la place de div uniquement pour un effet de style.
• Un header ou un footer vides, ou bien utilisés une seule fois alors qu’ils devraient aussi apparaître dans des articles qui ont leur propre en-tête.
• Un menu construit avec une suite de liens séparés par des espaces, au lieu d’une liste dans un nav.
• Des liens utilisés pour des actions (« Ouvrir la fenêtre ») ou des boutons utilisés pour naviguer : le lien mène quelque part, le bouton fait quelque chose.

Lien avec ce qui suit

Pour l’instant, votre page est une suite de blocs empilés les uns sous les autres, comme dans un traitement de texte. C’est normal : le HTML décrit la structure, pas l’agencement visuel. L’agencement viendra avec CSS, aux chapitres 3 et 4. Mais grâce à cette fondation sémantique, vos styles seront plus simples à écrire : vous pourrez cibler header, nav ou article directement.

À vous de jouer

Voici une page construite uniquement avec des div :

<div class="haut">
  <div class="titre">Atelier de Léa</div>
  <div class="menu"><a href="#">Accueil</a> <a href="#">Créations</a></div>
</div>
<div class="contenu">
  <div class="bloc"><div class="titre2">Les bols</div><p>Faits main.</p></div>
</div>
<div class="bas">Contact : Léa</div>

Réécrivez-la avec les éléments sémantiques appropriés, sans conserver les classes.

<header>
  <h1>Atelier de Léa</h1>
  <nav>
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Créations</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Les bols</h2>
    <p>Faits main.</p>
  </article>
</main>
<footer>
  <p>Contact : Léa</p>
</footer>

Dans la leçon suivante, vous ajoutez à la page l’élément interactif le plus important : le formulaire de contact.