Chapitre 418 minDébutant
Balises sémantiques HTML5 : header, nav, main, section, article
Par Josselyn C., prof de BTS SIO. Mis à jour le .
À la fin de ce chapitre, tu sauras
- expliquer ce que le HTML sémantique apporte à l'accessibilité et au référencement ;
- structurer une page avec
header,nav,mainetfooter; - choisir entre
section,articleetaside; - dire quand un rôle ARIA est utile, et quand il ne l'est pas ;
- vérifier la structure d'une page.
3 exercices corrigés1 schéma
Les balises sémantiques sont les éléments HTML qui disent à quoi sert une zone de la page : <header> pour l'en-tête, <nav> pour la navigation, <main> pour le contenu principal, <article>, <section>, <aside> et <footer>. Ce chapitre explique chacune, comment choisir entre <section>, <article> et <div>, et pourquoi ce choix compte pour l'accessibilité et le référencement.
Pourquoi écrire du HTML sémantique
Compare ces deux versions du haut d'une page :
<!-- Version « soupe de div » -->
<div class="haut">
<div class="logo">Médiathèque des Tilleuls</div>
<div class="menu">
<div><a href="index.html">Accueil</a></div>
<div><a href="agenda.html">Agenda</a></div>
</div>
</div>
<!-- Version sémantique -->
<header>
<p class="logo">Médiathèque des Tilleuls</p>
<nav aria-label="Menu principal">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="agenda.html">Agenda</a></li>
</ul>
</nav>
</header>
À l'écran, avec le même CSS, les deux sont identiques. Mais la seconde apporte trois choses :
- pour les lecteurs d'écran,
<header>,<nav>,<main>et<footer>deviennent des points de repère (landmarks) : la personne saute directement au menu ou au contenu principal par un raccourci, au lieu d'écouter toute la page depuis le début ; - pour les moteurs de recherche, la page dit clairement où est le contenu principal, où est la navigation, ce qui est un article autonome ;
- pour toi et l'équipe, le code se lit tout seul :
</nav>est plus parlant que le cinquième</div>d'affilée.
Les balises de structure : header, nav, main, footer
| Balise | Contenu | Point de repère (rôle) | Règle |
|---|---|---|---|
<header> | en-tête : logo, titre du site, menu, recherche | bannière (banner), quand il est l'en-tête de la page | il peut aussi servir d'en-tête à un <article> ou une <section> |
<nav> | un groupe de liens de navigation importants : menu principal, sommaire, fil d'Ariane | navigation | s'il y en a plusieurs, distingue-les par un aria-label |
<main> | le contenu principal, propre à cette page | principal (main) | un seul <main> visible par page, pas dans un <header>, <nav>, <article>, <aside> ou <footer> |
<aside> | un contenu lié mais secondaire : encadré, « à lire aussi », publicité | complémentaire | retiré, la page reste compréhensible |
<footer> | pied de page : mentions légales, contact, plan du site, copyright | informations sur le contenu (contentinfo), quand il est le pied de la page | il peut aussi être le pied d'un <article> (auteur, date) |
Tous les liens ne vont pas dans un <nav> : les liens « Mentions légales » et « Accessibilité » du pied de page peuvent rester dans le <footer>. Réserve <nav> aux blocs de navigation principaux.
section, article, aside : lequel choisir ?
Ces trois balises découpent le contenu. Les distinguer est la question la plus fréquente, et elle tombe souvent en évaluation.
| Balise | Question à te poser | Exemples |
|---|---|---|
<article> | « Ce contenu a-t-il un sens tout seul, sorti de la page ? Pourrait-on le publier ailleurs, le partager ? » | un billet de blog, une actualité, la fiche d'un atelier, un commentaire, une carte produit |
<section> | « Est-ce une partie thématique de la page, avec un titre ? » | « Ateliers de la semaine », « Infos pratiques », un chapitre |
<aside> | « Est-ce un contenu annexe, qu'on peut retirer sans perdre le sens principal ? » | un encadré « À ne pas manquer », une biographie de l'auteur |
<div> | « Ai-je juste besoin d'un conteneur pour le CSS ? » | un groupe à mettre en colonnes, une enveloppe pour centrer |
Les balises de structure ne remplacent pas les titres. Le plan de la page, celui que suivent les lecteurs d'écran et Google, reste donné par les <h1> à <h6>. Une idée répandue voulait que chaque <section> puisse recommencer à <h1> : aucun navigateur ni lecteur d'écran ne l'a jamais appliquée, et la spécification l'a abandonnée. Garde un seul <h1> et une hiérarchie continue.
Un exemple complet : la page d'accueil de la médiathèque
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Médiathèque des Tilleuls : livres, ateliers et jeux</title>
<meta name="description" content="Livres, BD, jeux vidéo et ateliers numériques gratuits. Horaires, agenda et inscriptions de la médiathèque des Tilleuls.">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="lien-evitement" href="#contenu">Aller au contenu</a>
<header>
<a href="index.html"><img src="images/logo.svg" alt="Médiathèque des Tilleuls – accueil" width="180" height="48"></a>
<nav aria-label="Menu principal">
<ul>
<li><a href="index.html" aria-current="page">Accueil</a></li>
<li><a href="agenda.html">Agenda</a></li>
<li><a href="catalogue.html">Catalogue</a></li>
<li><a href="infos.html">Infos pratiques</a></li>
</ul>
</nav>
</header>
<main id="contenu">
<h1>Bienvenue à la médiathèque des Tilleuls</h1>
<section>
<h2>Ateliers de la semaine</h2>
<article>
<h3>Initiation à l'ordinateur</h3>
<p><time datetime="2026-06-03T10:00">Mercredi 3 juin, 10 h</time> – 8 places</p>
<a href="ateliers/initiation.html">S'inscrire à l'initiation</a>
</article>
<article>
<h3>Club lecture ados</h3>
<p><time datetime="2026-06-06T14:30">Samedi 6 juin, 14 h 30</time> – 12 places</p>
<a href="ateliers/club-lecture.html">S'inscrire au club lecture</a>
</article>
</section>
<section>
<h2>Infos pratiques</h2>
<p>Ouvert du mardi au samedi. Entrée libre et gratuite.</p>
</section>
</main>
<aside>
<h2>À ne pas manquer</h2>
<p>Festival « Lire en été », du 1<sup>er</sup> au 15 juillet.</p>
</aside>
<footer>
<address>
Médiathèque des Tilleuls, 12 rue des Écoles –
<a href="tel:+33123456789">01 23 45 67 89</a> –
<a href="mailto:contact@mediatheque-tilleuls.fr">contact@mediatheque-tilleuls.fr</a>
</address>
<ul>
<li><a href="mentions-legales.html">Mentions légales</a></li>
<li><a href="donnees-personnelles.html">Données personnelles</a></li>
<li><a href="accessibilite.html">Accessibilité : partiellement conforme</a></li>
</ul>
</footer>
</body>
</html>
Quelques détails de ce code à remarquer :
- le lien d'évitement « Aller au contenu », premier élément de la page, permet à qui navigue au clavier de sauter le menu ; on le masque visuellement jusqu'à ce qu'il reçoive le focus (chapitre 12) ;
aria-current="page"signale, dans le menu, la page où l'on se trouve ;- chaque lien « S'inscrire » nomme l'atelier, pour être compréhensible seul dans la liste des liens ;
- le pied de page affiche l'état de conformité à l'accessibilité, une mention obligatoire pour un site public.
D'autres balises qui ont du sens
| Balise | Rôle | Exemple |
|---|---|---|
<time datetime="…"> | une date ou une heure, avec sa valeur lisible par une machine (format ISO 8601) | <time datetime="2026-06-03">3 juin</time> |
<address> | les coordonnées de contact de l'auteur de la page ou de l'article (pas n'importe quelle adresse postale) | le contact de la médiathèque dans le pied de page |
<details> et <summary> | un bloc repliable, ouvert d'un clic ou au clavier, sans JavaScript | une question de FAQ |
<dialog> | une boîte de dialogue (fenêtre modale), ouverte par un script | une confirmation « Annuler l'inscription ? » |
<search> | la zone qui contient un formulaire de recherche (point de repère « recherche ») | la recherche dans le catalogue |
<hgroup> | un titre et son sous-titre | <hgroup><h1>…</h1><p>…</p></hgroup> |
<details>
<summary>Faut-il être inscrit pour venir aux ateliers ?</summary>
<p>Non : les ateliers sont gratuits et ouverts à tous, sur inscription à l'accueil
ou en ligne, dans la limite des places disponibles.</p>
</details>
Les rôles ARIA : quand s'en servir
ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs (role, aria-label, aria-expanded, aria-current…) qui complètent le HTML pour les technologies d'assistance. Tu en as vu trois dans l'exemple. La règle d'or, que le W3C appelle la première règle d'ARIA :
Les usages d'ARIA que tu rencontreras le plus souvent en BTS :
| Attribut | Usage |
|---|---|
aria-label="…" | donner un nom à un élément qui n'a pas de texte visible (un bouton icône), ou distinguer deux <nav> |
aria-current="page" | marquer le lien de la page active dans un menu |
aria-expanded="true/false" | dire si un menu ou un panneau commandé par un bouton est ouvert |
aria-describedby="id" | relier un champ de formulaire à son message d'aide ou d'erreur (chapitre 5) |
aria-hidden="true" | masquer aux lecteurs d'écran un élément purement décoratif (une icône à côté d'un texte) |
Vérifier la structure d'une page
Trois vérifications rapides, à faire sur chaque page :
- Le validateur du W3C (validator.w3.org) : il signale par exemple deux
<main>visibles, un<li>hors d'une liste ou des balises qui se chevauchent. - Le plan des titres : une extension comme HeadingsMap (Firefox, Chrome) affiche la liste des titres et des points de repère. Tu repères tout de suite un
<h1>manquant ou un saut de niveau. - La page sans CSS : dans Firefox, menu Affichage > Style de la page > Aucun style. Ce qui reste, c'est ce que « voit » un moteur de recherche ou ce qu'entend un lecteur d'écran : la page doit rester lisible, dans un ordre logique.
Exercices
Exercice 1 sur 3 La bonne balise de structure Réussi À revoir
Choisis la balise la plus adaptée (header, nav, main, section, article, aside, footer, div) pour chaque zone du site de la médiathèque.
- Le menu principal (Accueil, Agenda, Catalogue, Infos pratiques).
- Une actualité « Nouveaux horaires d'été » avec son titre, sa date et son texte.
- Le bloc « Infos pratiques » de la page d'accueil, avec un titre
<h2>. - Les liens « Mentions légales », « Données personnelles », « Accessibilité » en bas de page.
- Un conteneur qui sert seulement à afficher trois cartes côte à côte.
- Un encadré « Le saviez-vous ? » dans un article sur l'histoire du bâtiment.
- Le fil d'Ariane « Accueil > Agenda > Club lecture ».
Voir la réponseMasquer la réponse de l'exercice 1
<nav>(dans le<header>), avecaria-label="Menu principal".<article>: une actualité a un sens toute seule et peut être partagée.<section>: une partie thématique de la page, avec un titre.<footer>, avec une simple liste de liens. Un<nav aria-label="Liens utiles">est aussi accepté, mais ce n'est pas une navigation principale.<div>: un conteneur sans sens, pour la mise en page.<aside>dans l'<article>: un contenu annexe, qu'on peut retirer sans perdre le sens de l'article.<nav aria-label="Fil d'Ariane">, avec une liste ordonnée<ol>des liens (l'ordre compte) etaria-current="page"sur le dernier élément.
Tu avais trouvé ?
Exercice 2 sur 3 Restructurer une page Réussi À revoir
Réécris ce code en HTML sémantique, sans changer le contenu.
<div id="header">
<div class="titre">Club informatique</div>
<div id="menu"><a href="/">Accueil</a> | <a href="/ateliers">Ateliers</a></div>
</div>
<div id="content">
<div class="big">Nos ateliers</div>
<div class="post">
<div class="big2">Monter son PC</div>
<div>Le 12 mars à 18 h.</div>
</div>
</div>
<div id="footer">© 2026 Club informatique</div>
Voir la réponseMasquer la réponse de l'exercice 2
<header>
<p class="titre">Club informatique</p>
<nav aria-label="Menu principal">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/ateliers">Ateliers</a></li>
</ul>
</nav>
</header>
<main>
<h1>Nos ateliers</h1>
<article>
<h2>Monter son PC</h2>
<p>Le <time datetime="2026-03-12T18:00">12 mars à 18 h</time>.</p>
</article>
</main>
<footer>
<p>© 2026 Club informatique</p>
</footer>
Les <div class="big"> étaient des titres déguisés : ce sont des <h1> et <h2>. Le menu devient une liste de liens dans un <nav> ; les barres verticales | de séparation, qu'un lecteur d'écran lirait, disparaissent (le CSS dessinera les séparateurs si besoin). Le nom du club n'est pas le <h1> ici : sur cette page, le sujet principal est « Nos ateliers ».
Tu avais trouvé ?
Exercice 3 sur 3 Vrai ou faux Réussi À revoir
- Une page peut contenir plusieurs
<header>. - Une page peut contenir plusieurs
<main>visibles. - Une
<section>sans titre est valide et recommandée pour regrouper des éléments. <div role="button">est équivalent à<button>.- Changer les
<div>en balises sémantiques modifie l'apparence de la page.
Voir la réponseMasquer la réponse de l'exercice 3
- Vrai : un pour la page, et un par
<article>ou<section>qui en a besoin. Seul celui de la page est un point de repère « bannière ». - Faux : un seul
<main>visible par page (d'autres peuvent exister avec l'attributhidden, dans une application qui change de vue). - Faux : une section a toujours un titre. Pour regrouper des éléments sans titre, c'est le rôle d'un
<div>. - Faux : le rôle annonce un bouton, mais le
<div>ne reçoit pas le focus au clavier et ne réagit ni àEntréeni àEspacesans script. Utilise<button>. - Faux, à quelques détails près (
<address>est en italique,<main>et<section>n'ont pas de style particulier) : l'apparence vient du CSS. C'est pour ça qu'on peut toujours passer au sémantique sans rien casser.
Tu avais trouvé ?