Commencer→
Retour au cours

frontend / html

Sémantique avancée : article, section, nav, aside, figure

Leçon 71 exercice

Explication

Ce que vous allez apprendre

  • Remplacer une structure de <div> génériques par les balises sémantiques HTML5 adéquates
  • Distinguer précisément <article> (contenu autonome) de <section> (regroupement contextuel)
  • Structurer une page complète avec header, nav, main, aside et footer
  • Utiliser plusieurs <nav> sur une même page sans créer d'ambiguïté
  • Faire commencer chaque section/article par un titre pour construire une table des matières implicite

Dans quel contexte ?

En auditant le code source d'un blog existant, un développeur découvre que toute la page repose sur des <div class="header">, <div class="nav">, <div class="article"> imbriquées. L'extension Chrome "HeadingsMap", utilisée pour vérifier l'accessibilité, n'affiche aucune structure exploitable. En remplaçant ces divs par <header>, <nav> et <article>, la même page devient immédiatement navigable par landmarks pour un utilisateur de lecteur d'écran, sans changer une seule ligne de CSS.

Étape 1 : le problème de la "div-ite aiguë"

Pendant longtemps, les développeurs ont construit des pages entières avec des <div> partout, distinguées uniquement par des classes CSS (class="header", class="nav"...). Visuellement, ça marche très bien.

Étape 2 : pourquoi ça ne suffit pas

Le problème, c'est que ça ne dit rien à une machine. Une <div class="header"> reste, pour un lecteur d'écran ou un moteur de recherche, une simple boîte anonyme parmi des centaines d'autres sur la page.

Étape 3 : la solution apportée par HTML5

Voici comment HTML5 corrige ça : il introduit des balises sémantiques (header, nav, main, article, section, aside, footer) qui remplacent ces divs génériques par des rôles explicites. Chacune annonce clairement sa fonction dans le document.

Étape 4 : changer sa façon de penser une page

La bonne question à se poser change alors : ce n'est plus "à quoi ce bloc doit ressembler", mais "quelle est sa fonction dans le document". Un <nav> est une zone de navigation, peu importe son style ; un <main> contient le contenu principal unique de la page.

Cette structure crée une carte de navigation invisible mais essentielle, que les technologies d'assistance utilisent pour sauter directement d'une zone à l'autre.

BaliseRôle implicite (landmark)Combien par page ?
<header>banner (au niveau racine)Un au niveau page, possible aussi par article
<nav>navigationPlusieurs, avec aria-label pour les distinguer
<main>mainExactement un seul
<aside>complementaryAutant que nécessaire
<footer>contentinfo (au niveau racine)Un au niveau page, possible aussi par article

Prérequis

Cette leçon suppose que vous êtes à l'aise avec les formulaires et le texte de base ; elle ne demande aucune notion CSS ou JavaScript particulière.

Étape 5 : la distinction la plus délicate, article vs section

Il reste un piège classique à éclaircir. Un <article> doit avoir du sens tout seul, sorti de son contexte — un post de blog resterait compréhensible même republié ailleurs tel quel.

Une <section>, au contraire, est un regroupement thématique qui n'a de sens que DANS la page qui l'entoure. La section "avis clients" d'une fiche produit, par exemple, n'a aucun sens isolée du produit en question.

Étape 6 : un dernier réflexe à prendre

Chaque section ou article gagne à commencer par un titre (h2, h3...). C'est ce titre qui permet aux technologies d'assistance de construire une table des matières implicite de la page.

Bonne pratique

Pour trancher entre article et section, posez-vous la question suivante : "si je copie-colle ce bloc sur un autre site, garde-t-il un sens ?" Un post de blog (article) : oui. La section "Avis clients" d'une fiche produit (section) : non, elle perd tout son sens hors contexte.

Et ensuite ?

Une fois cette structure posée, la prochaine étape consiste à aller plus loin dans l'accessibilité avec ARIA, les rôles et les landmarks.

Commandes & code

Sémantique avancée

Structurer une page comme un document, pas comme une suite de <div>.

html
<body>
    <header>
        <img src="/logo.svg" alt="Technologik">
        <nav aria-label="Navigation principale">
            <ul>
                <li><a href="/">Accueil</a></li>
                <li><a href="/cours">Cours</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h1>Comprendre les Web Components</h1>
                <p>
                    Publié le <time datetime="2026-03-14">14 mars 2026</time>
                    par <a href="/auteurs/marie">Marie L.</a>
                </p>
            </header>

            <section>
                <h2>Custom Elements</h2>
                <p>...</p>
            </section>

            <section>
                <h2>Shadow DOM</h2>
                <p>...</p>
            </section>

            <aside>
                <h2>À retenir</h2>
                <p>Un aside lié à l'article, pas au site entier.</p>
            </aside>

            <footer>
                <p>Tags : <a href="/tags/webcomponents">Web Components</a></p>
            </footer>
        </article>

        <aside aria-label="Contenu complémentaire">
            <h2>Articles similaires</h2>
            <ul>
                <li><a href="/a1">Shadow DOM en profondeur</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 Technologik. Tous droits réservés.</p>
    </footer>
</body>
html
<!-- article vs section : la règle de décision -->
<!-- article : contenu autonome, réutilisable/syndicable tel quel
     (un post de blog, un commentaire, une carte produit) -->
<article>
    <h3>Avis client</h3>
    <p>Excellent produit, livraison rapide.</p>
</article>

<!-- section : regroupement thématique DANS un contexte,
     n'a pas de sens isolé -->
<section aria-labelledby="titre-avis">
    <h2 id="titre-avis">Avis clients</h2>
    <article>...</article>
    <article>...</article>
</section>

<!-- figure : pas que pour les images -->
<figure>
    <pre><code>const x = 42;</code></pre>
    <figcaption>Exemple 1 : déclaration d'une constante</figcaption>
</figure>

Résumé

  • article = autonome et syndicable ; section = regroupement thématique contextuel.
  • Chaque section/article gagne à avoir un titre (h2/h3) pour l'arborescence d'accessibilité.
  • nav avec aria-label distingue plusieurs zones de navigation sur une même page.
  • header/footer peuvent apparaître plusieurs fois : au niveau page ET au niveau article.

Exercices pratiques

1 disponible
1

Mission : guérir la div-ite du blog

Objectif : Remplacer une structure de div génériques par les bonnes balises sémantiques, et trancher correctement entre article et section.

Contexte

L'extension HeadingsMap, utilisée pour vérifier l'accessibilité de blog.html, n'affiche aucune structure exploitable : toute la page repose sur des <div class="header">, <div class="nav"> et <div class="article"> imbriquées. La page a aussi DEUX menus de navigation (le menu principal et un fil d'ariane), et une zone "Avis clients" sous chaque article.

Ta mission : corriger la structure sémantique.

Résoudre l’exercice →