Module 2Structurer et enrichir une page
Chapitre 8 sur 13
La sémantique HTML5
header, nav, main, section, article, aside, footer et balises sémantiques utiles.
- ≈ 135 min
- 5 leçons
- 1 vidéo
- 3 exercices
Module 2Structurer et enrichir une page
Chapitre 8 sur 13
header, nav, main, section, article, aside, footer et balises sémantiques utiles.
Objectifs
Avec ce chapitre, tu sauras…
<header>, <nav>, <main>, <section>, <article>, <aside> et <footer> ;<section>, <article> et <div> sans hésiter ;<time>, <address>, <details> et <summary> ;Au chapitre 7, tu as vu que <div> n'a aucun sens. HTML5 (2014) a introduit des balises de structure qui se comportent comme des <div>, mais qui disent ce qu'elles contiennent : un en-tête, un menu, le contenu principal, un pied de page. C'est la différence entre un intégrateur débutant et un intégrateur professionnel.
Leçon 1
Tableau: Ce que la sémantique apporte
| Pour qui ? | Bénéfice |
|---|---|
| les personnes aveugles | le lecteur d'écran annonce « navigation », « contenu principal », « pied de page » et permet d'y sauter directement |
| il repère le contenu principal, les articles et leurs dates, et classe mieux la page | |
| les développeurs | </nav> se comprend mieux que le cinquième </div> d'affilée |
| les navigateurs | le mode lecture de Safari ou Firefox sait quoi garder |
Leçon 2
| Balise | Rôle | Combien ? |
|---|---|---|
<header> | en-tête : logo, titre, menu. D'une page, ou d'un article | plusieurs possibles |
<nav> | bloc de liens de navigation principaux | plusieurs possibles |
<main> | contenu principal, unique à cette page | un seul par page |
<section> |
Leçon 3
| Contenu | Balise | Raison |
|---|---|---|
| un article de blog | <article> | autonome, partageable |
| la zone « Nos services » d'une page d'accueil | <section> | partie thématique, avec un titre |
| une carte produit dans une liste | <article> |
Leçon 4
| Balise | Rôle | Exemple |
|---|---|---|
<time> | une date ou une heure, lisible par les machines grâce à datetime | <time datetime="2026-10-21">21 octobre 2026</time> |
<address> | coordonnées de contact de l'auteur ou de l'entreprise | e-mail, téléphone, adresse |
<details> + <summary> | un bloc dépliable, sans JavaScript | une FAQ, des détails techniques |
Leçon 5
1Combien de <main> par page ?
2Un commentaire d'utilisateur se balise plutôt avec…
3La zone « Articles récents » sur le côté se balise avec…
4Pour une date lisible par Google :
5Une boîte qui sert seulement à centrer le contenu :
6Quelle paire crée un bloc dépliable sans JavaScript ?
L'essentiel du chapitre
<header> · <nav> · <main> (un seul) · <section> · <article> · <aside> · <footer>.<article> ; thème avec un titre → <section> ; mise en forme → <div>.<header> et <footer> appartiennent à leur parent : la page ou un article.<time datetime="2026-10-21">, <address>, <details> + <summary>.| regroupement thématique de contenu, avec un titre |
| plusieurs |
<article> | contenu autonome, qui aurait du sens seul : article, produit, commentaire | plusieurs |
<aside> | contenu complémentaire : encadré, publicité, liens connexes | plusieurs |
<footer> | pied : copyright, contact, mentions légales. D'une page, ou d'un article | plusieurs possibles |
Vidéo · À regarder
ENHTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours
Dave Gray · YouTube
| chaque produit est autonome |
| un commentaire sous un article | <article> (dans l'article) | autonome |
| une boîte pour centrer le contenu | <div> | mise en forme seulement |
| les témoignages clients | <section> contenant des <article> ou des <blockquote> | un thème, plusieurs éléments |
<figure> + <figcaption>| contenu illustré et sa légende |
| chapitre 6 |
<mark> | texte surligné | chapitre 3 |
Tableau: Les sept balises à connaître
C'est la question que se posent tous les intégrateurs. Voici le test à appliquer.
<article>.<section>.<div>.Tableau: Exemples
Tableau: time, address, details et summary
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bien débuter en HTML — Le blog d'Anas</title>
</head>
<body>
<header>
<a href="index.html"><img src="images/logo.svg" alt="Le blog d'Anas — accueil" width="120" height="40"></a>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="articles.html" aria-current="page">Articles</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Bien débuter en HTML</h1>
<p>Publié le <time datetime="2026-10-21">21 octobre 2026</time> par Anas</p>
</header>
<section>
<h2>Installer son environnement</h2>
<p>Commence par installer VS Code et l'extension Live Server…</p>
</section>
<section>
<h2>Écrire sa première page</h2>
<p>Le squelette minimal d'une page contient…</p>
</section>
<footer>
<p>Catégorie : <a href="categories/html.html">HTML</a></p>
</footer>
</article>
<section>
<h2>Commentaires</h2>
<article>
<h3>Sara, le <time datetime="2026-10-22">22 octobre</time></h3>
<p>Merci, très clair !</p>
</article>
</section>
</main>
<aside>
<h2>Articles récents</h2>
<ul>
<li><a href="articles/liens.html">Tout comprendre aux liens</a></li>
<li><a href="articles/images.html">Optimiser ses images</a></li>
</ul>
</aside>
<footer>
<p><small>© 2026 Le blog d'Anas</small></p>
<address><a href="mailto:anas@exemple.ma">anas@exemple.ma</a></address>
</footer>
</body>
</html>Remarque que l'<article> a son propre <header> (titre et date) et son propre <footer> (catégorie). <header> et <footer> désignent l'en-tête et le pied de leur parent : de la page s'ils sont directement dans le <body>, de l'article s'ils sont dans l'<article>.
Les lecteurs d'écran appellent ces zones des landmarks (« points de repère ») : <header> = banner, <nav> = navigation, <main> = main, <aside> = complementary, <footer> = contentinfo. Un audit d'accessibilité (obligatoire pour les sites publics dans de nombreux pays) vérifie leur présence. L'attribut aria-current="page" signale le lien de la page en cours.
Écris la page d'accueil complète d'une école de code fictive : en-tête avec logo et menu, contenu principal avec une section « Nos formations » contenant trois article (une formation chacun), une section « Questions fréquentes » avec trois details, un aside « Prochaine session : 4 janvier 2027 » avec une balise time, et un pied de page avec address. Fais valider la page par le W3C.
Pour chacune de ces zones d'un site d'e-commerce, donne la balise la plus adaptée : (a) le logo et la barre de recherche en haut ; (b) les liens « Femme · Homme · Enfant » ; (c) la fiche d'un produit dans la liste des résultats ; (d) le bloc « Les clients ont aussi aimé » sur le côté ; (e) la zone « Avis clients » sous la fiche ; (f) les liens « CGV · Livraison · Contact » tout en bas.
Réécris ce code avec les bonnes balises sémantiques.
<div class="haut">
<div class="logo">Agence Atlas</div>
<div class="menu"><a href="#">Accueil</a> <a href="#">Services</a></div>
</div>
<div class="contenu">
<div class="bloc-services">
<div class="titre">Nos services</div>
<div>Création de sites vitrines et e-commerce.</div>
</div>
</div>
<div class="bas">© 2026 Agence Atlas</div>La mise en page type
<div style="font-family:Inter,sans-serif;font-size:8pt;text-align:center;color:#fff">
<div style="background:#4a2f8f;padding:6px;margin:2px;border-radius:3px"><header> logo + titre du site<div style="background:#7a5fd0;margin:4px 30px 0;padding:3px;border-radius:3px"><nav> Accueil · Articles · Contact</div></div>
<div style="background:#5b6478;padding:6px;margin:2px;border-radius:3px;width:68%;display:inline-block;vertical-align:top"><main><div style="background:#8a93a8;margin:4px;padding:4px;border-radius:3px"><article> titre, date, texte de l'article<div style="background:#a9b1c3;margin:4px;padding:3px;border-radius:3px"><section> une partie de l'article</div><div style="background:#a9b1c3;margin:4px;padding:3px;border-radius:3px"><section> une autre partie</div></div></div><div style="background:#2e9a52;padding:6px;margin:2px;border-radius:3px;width:25%;display:inline-block;vertical-align:top;height:86px"><aside><br>articles récents,<br>publicité</div>
<div style="background:#c49a12;padding:6px;margin:2px;border-radius:3px"><footer> © 2026 · mentions légales · contact</div>
</div>Il ne doit y avoir qu'un seul <main> visible par page, et il ne doit pas être placé à l'intérieur d'un <header>, <nav>, <article>, <aside> ou <footer>. C'est le contenu propre à la page : le menu et le pied de page, répétés sur toutes les pages, sont en dehors du <main>.
Le chapitre « Semantic Tags » de Dave Gray (anglais, sous-titres français automatiques). C'est la vidéo de référence de ce chapitre : regarde le segment en entier et reproduis ses exemples dans ton éditeur.
Une <section> ou un <article> commence presque toujours par un titre (<h2>, <h3>…). Si tu n'arrives pas à donner un titre à ta section, c'est probablement une <div>.
<details>
<summary>Faut-il un diplôme pour devenir développeur web ?</summary>
<p>Non, mais une formation structurée et un portfolio de projets t'aideront énormément.</p>
</details>
<details open>
<summary>Combien de temps faut-il pour apprendre le HTML ?</summary>
<p>Environ quatre semaines pour les bases, avec une pratique régulière.</p>
</details><details><summary>Faut-il un diplôme pour devenir développeur web ?</summary><p>Non, mais une formation structurée et un portfolio de projets t'aideront énormément.</p></details>
<details open><summary>Combien de temps faut-il pour apprendre le HTML ?</summary><p>Environ quatre semaines pour les bases, avec une pratique régulière.</p></details>datetime utilise le format international : 2026-10-21 (année-mois-jour), 14:30 (heure), ou 2026-10-21T14:30 (les deux). Le texte affiché, lui, peut être écrit comme tu veux : « mercredi 21 octobre », « il y a 2 jours ».