Les boîtes qui ont un nom
On pourrait tout construire avec des div. HTML propose pourtant des boîtes qui disent ce qu'elles contiennent — et ça n'a rien d'un détail.
-
4ttr
- Découverte
On pourrait tout construire avec des div. HTML propose pourtant des boîtes qui disent ce qu'elles contiennent — et ça n'a rien d'un détail.
Techniquement, une page entière peut être bâtie avec des <div>. Ça fonctionne, le navigateur ne proteste pas.
Mais une page pleine de <div> ne dit rien de ce qu'elle contient — ni à Google, ni à un lecteur d'écran, ni à toi dans trois semaines. HTML fournit donc des conteneurs qui portent un nom.
À la fin de ce cours, tu seras capable de :
<header>, <nav>, <main> et <footer> au bon endroit.| Balise | Ce qu'elle contient |
|---|---|
<header> |
L'en-tête : le titre du site, un logo, une accroche |
<nav> |
Le menu de navigation |
<main> |
Le contenu principal — une seule fois par page |
<footer> |
Le pied de page : mentions, contact, date |
Elles se comportent exactement comme des <div> : ce sont des éléments bloc, elles prennent toute la largeur, elles acceptent les mêmes propriétés CSS. La seule différence est le sens qu'elles portent.
On les appelle des balises sémantiques : leur nom décrit le rôle du contenu, pas son apparence.
🧠 À retenir : un lecteur d'écran permet à une personne aveugle de sauter directement au
<main>pour éviter de réécouter le menu à chaque page. Avec des<div>, ce raccourci n'existe pas.
<body>
<header>
<h1>Les types de virus</h1>
</header>
<nav>
<a href="#">Introduction</a>
<a href="#">Les virus</a>
<a href="#">Phishing</a>
</nav>
<main>
<p>On appelle « virus » à peu près tout ce qui infecte un ordinateur.</p>
</main>
<footer>
<p>Mini-site cybersécurité — 2026</p>
</footer>
</body>
Cette organisation en quatre zones est celle de l'immense majorité des sites. Une fois que tu la reconnais, tu la vois partout.
Un menu, ce n'est rien d'autre qu'une liste de liens placée dans un <nav>.
<nav>
<a href="#">Introduction</a>
<a href="#">Les virus</a>
<a href="#">Phishing</a>
</nav>Petit rappel : <a href="..."> crée un lien, et l'attribut href porte la destination.
ℹ️
href="#"est un lien qui ne mène nulle part. C'est pratique pour construire un menu avant que les vraies pages existent : le lien se comporte comme un lien, mais ne provoque aucun déplacement.
Les trois liens s'affichent l'un à côté de l'autre — les balises <a> sont des éléments en ligne — mais collés, séparés par une simple espace. On verra comment les répartir proprement au cours suivant.
Comme <header> est une boîte ordinaire, elle accepte tout ce que tu sais déjà faire :
header {
background-color: MidnightBlue;
color: white;
padding: 20px;
text-align: center;
}Quatre lignes, et l'en-tête ressemble enfin à un en-tête : un bandeau sombre, du texte blanc centré, de l'air autour.
Remarque le sélecteur : header, sans point et sans chevrons. C'est un sélecteur d'élément — il vise la balise elle-même, comme p ou h1. Pas besoin de classe ici : il n'y a qu'un seul <header> dans la page.
⚠️ Attention : si ton bandeau ne touche pas les bords de la fenêtre, c'est la marge par défaut du
<body>qui traîne. Ajoutebody { margin: 0; }.
Ils ne disparaissent pas. Les balises sémantiques couvrent les grandes zones de la page ; à l'intérieur, quand tu regroupes trois cartes ou deux paragraphes, <div> reste l'outil normal.
La règle est simple : s'il existe une balise qui décrit ce que tu emballes, utilise-la. Sinon, prends un <div>.
<header> et <div> ?<main> une page doit-elle contenir ?href="#" ?<header>, <nav>, <main>, <footer> sont des <div> qui portent un sens.<main> par page.<nav> contenant des liens <a>.header { … }.<div>.Ton menu existe, mais ses liens sont collés les uns aux autres. Il est temps de découvrir l'outil qui a changé la mise en page du web : Flexbox.