🗂️ Le cours : donner du sens à la structure
Avant HTML5, on construisait les pages avec des <div> partout. Pour le navigateur, une page n'était alors qu'un empilement de boîtes dont il ignorait le rôle. Les balises sémantiques (*semantic* : « qui a un sens ») nomment ces rôles : en-tête, menu, contenu, pied de page.
Pourquoi s'en soucier ?
- Accessibilité : un lecteur d'écran propose de sauter directement au menu (
<nav>) ou au contenu (<main>) ; avec des <div>, il lit tout dans l'ordre.
- Référencement : les moteurs de recherche repèrent le contenu principal et les titres.
- Lisibilité du code :
<footer> se comprend, <div class="bas"> demande une explication.
- Maintenance : on retrouve plus vite la bonne zone à modifier.
La structure d'une page
body
├── header logo, titre du site, <nav> principal
├── main contenu propre à CETTE page (un seul <main>)
│ ├── article contenu autonome
│ ├── section regroupement thématique avec un titre
│ └── aside encadré, informations annexes
└── footer mentions légales, contact
article ou section ?
Un <article> a un sens complet hors de son contexte : on pourrait le publier ailleurs tel quel (un article de blog, une fiche de cours, un commentaire). Une <section> est un regroupement thématique à l'intérieur d'un document, et doit presque toujours commencer par un titre. S'il n'y a pas de titre naturel et que tu n'as besoin que de style, c'est un <div>.
<main>
<h1>Derniers articles</h1>
<article>
<h2><a href="tri.html">Comprendre le tri</a></h2>
<p>Publié le <time datetime="2026-09-20">20 septembre 2026</time></p>
<p>Résumé de l'article…</p>
</article>
<article>
<h2><a href="reseau.html">Le modèle TCP/IP</a></h2>
<p>Publié le <time datetime="2026-09-12">12 septembre 2026</time></p>
<p>Résumé de l'article…</p>
</article>
</main>
header et footer ne servent pas qu'à la page
Un <header> ou un <footer> peut aussi apparaître dans un <article> ou une <section> (titre et auteur en haut, sources en bas). Dans ce cas ils concernent seulement leur bloc.
nav : la navigation principale
<nav> est réservé aux blocs de liens de navigation importants (menu principal, sommaire, fil d'Ariane), pas à chaque groupe de liens. S'il y en a plusieurs, distingue-les avec aria-label="Menu principal", aria-label="Pied de page".
Quand utiliser div et span
Quand aucune balise ne convient : regrouper des éléments pour les aligner avec Flexbox, entourer un mot pour lui donner une couleur (<span class="prix">), cibler un élément avec JavaScript. Ils ne sont pas à éviter à tout prix, mais à choisir en dernier.
Les attributs globaux
Certains attributs fonctionnent sur tous les éléments.
| Attribut | Usage |
|---|
id | identifiant unique dans la page (ancres, CSS, JavaScript) |
class | un ou plusieurs noms de classes séparés par des espaces, pour le CSS |
lang | langue d'un passage (<span lang="en">cheat sheet</span>) |
title | info-bulle au survol (ne pas y mettre d'information essentielle) |
hidden | masque l'élément |
data-* | données personnalisées lues par JavaScript (data-niveau="3") |
<p id="avertissement" class="note important" data-niveau="3">Attention au piège.</p>
<p>Le mot <span lang="en">cheat sheet</span> est anglais.</p>
<p hidden>Ce paragraphe n'est pas affiché.</p>
RenduDeux lignes seulement : « Attention au piège. » puis la phrase sur le mot anglais. Le troisième paragraphe est masqué.
