6 balises d’architecture pour structurer une page HTML
Dans le cours précédent, nous avons vu la différence entre les balises de type block et inline. Nous allons voir dans celui-ci les balises block qui permettent de construire le squelette d’une page web. Ces balises d’architecture ont été introduites pour la plupart avec l’arrivée du HTML5, et elles n’ont pas pris une ride : ce sont toujours elles qui structurent les sites que vous visitez aujourd’hui. Elles allègent le code des pages tout en indiquant au navigateur le sens du contenu.
J’ai entièrement mis à jour ce cours : tous les comportements décrits ici ont été vérifiés dans Chrome 151 pendant la rédaction, y compris ce que ces balises changent réellement pour un lecteur d’écran.
Pourquoi des balises d’architecture ?
Première chose à savoir, et elle surprend souvent : visuellement, ces balises ne font rien de spécial. J’ai mesuré leurs styles calculés dans Chrome : header, nav, section, article, aside et footer ont toutes display: block, occupent toute la largeur disponible et n’apportent ni marge ni bordure par défaut. À l’écran, elles se comportent exactement comme des div.
Leur intérêt est ailleurs : elles donnent du sens au contenu. Une div dit au navigateur « voici un bloc », sans plus. Une balise nav lui dit « voici la navigation du site ». Si les notions de balise et d’attribut restent floues pour vous, faites d’abord un tour par les bases pour bien débuter en HTML.
Ce sens profite à deux publics bien réels. Les lecteurs d’écran d’abord : chaque balise d’architecture expose un « rôle » dans l’arbre d’accessibilité du navigateur, et ces rôles servent de points de repère pour sauter directement au menu, au contenu principal ou au pied de page. Les moteurs de recherche ensuite : cette structure les aide à identifier le contenu principal d’une page et à le distinguer des menus et pieds de page répétés partout sur le site.
J’ai fait le test comparatif pendant la rédaction : la même page construite une fois avec ces balises, une fois uniquement avec des div. Version sémantique, l’arbre d’accessibilité de Chrome affiche des repères nets : banner pour le header, navigation pour le nav, main, complementary pour l’aside, contentinfo pour le footer. Version tout-div : une liste plate de textes, sans aucun repère. Pour quelqu’un qui navigue sans voir l’écran, c’est toute la différence entre un plan de la page et un mur de texte.
Les 6 balises, une par une
1. header
Presque tous les sites possèdent un header (un en-tête en français) situé tout en haut des pages. Il prend très souvent la forme d’une bannière, et on peut y retrouver un logo, le slogan du site, le menu principal, la barre de recherche… Placé directement sous le body, il obtient le rôle banner dans l’arbre d’accessibilité.
Une page peut contenir plusieurs header : un article de blog a par exemple souvent le sien, avec le titre et la date de publication. Détail mesuré pendant la rédaction : un header imbriqué dans un article perd son rôle banner, qui reste réservé à l’en-tête principal de la page. Le navigateur fait donc bien la différence entre les deux usages.
2. nav
L’élément nav (pour navigation) rassemble les principaux liens pour naviguer sur le site. On le retrouve fréquemment dans l’en-tête ou sur un côté de la page, sous la forme du menu principal. Il peut aussi regrouper des liens internes à la page, comme un sommaire qui amène directement le lecteur à la partie qui l’intéresse. Son rôle d’accessibilité est navigation : c’est lui que les lecteurs d’écran proposent quand l’utilisateur demande à rejoindre le menu. Inutile en revanche d’envelopper chaque lien du site dans un nav : réservez-le aux blocs de navigation à part entière.
3. section
La balise section regroupe un ensemble de contenus qui forment un tout thématique : une partie « derniers articles », une partie « témoignages », une partie « tarifs »… La bonne pratique est simple : si vous pouvez donner un titre (h2, h3…) à un groupe de contenus, c’est probablement une section ; sinon, une div suffit. Une section peut imbriquer d’autres blocs : des header, des article, et même d’autres sections.
Un comportement mesuré mérite d’être signalé : contrairement aux cinq autres balises, une section seule n’apparaît pas comme repère dans l’arbre d’accessibilité, même avec un titre à l’intérieur. Dans mon test, elle n’obtient le rôle region qu’à partir du moment où on lui donne un nom accessible, par exemple avec l’attribut aria-label="Derniers articles". À votre niveau, retenez surtout qu’une section s’accompagne d’un titre : le reste viendra plus tard.
4. article
La balise article regroupe une partie autonome de la page : un contenu qui garderait son sens si on le publiait ailleurs, seul. Un billet de blog, une actualité, une fiche produit, un commentaire… Le test mental est simple : « est-ce que ce bloc se suffit à lui-même ? ». Elle est très utilisée dans les domaines de l’actualité et du blogging, et chaque article peut embarquer son propre header (titre, date) et son propre footer (auteur, tags), comme je l’ai vérifié dans mon test : le navigateur accepte cette imbrication sans broncher.
5. aside
La balise aside apporte des informations complémentaires au contenu principal : une définition, une biographie d’auteur, une liste d’articles liés, une publicité… Son rôle d’accessibilité, complementary, dit exactement cela : « contenu à côté du sujet principal ». On la représente généralement sur le côté de la page (aside signifie « à part »), mais attention à une idée reçue : ce placement n’a rien d’automatique. Dans mon test sans CSS, l’aside s’affiche sous la section qui la précède, empilée comme n’importe quel bloc. C’est la mise en forme, par exemple avec Flexbox, qui la placera visuellement en colonne latérale.
6. footer
À l’inverse du header, le footer (pied de page en français) se situe tout en bas des pages. On y retrouve bien souvent des informations annexes : mentions légales, contacts, liens pratiques, réseaux sociaux… Placé directement sous le body, il obtient le rôle contentinfo. Comme le header, il peut exister en plusieurs exemplaires (un par article par exemple), et seul le pied de page principal garde ce rôle de repère.
Un squelette complet, testé dans Chrome
Voici les six balises assemblées en une page minimale mais complète. C’est exactement la structure que j’ai chargée dans Chrome 151 pour toutes les mesures de cet article. Si le contenu du head ne vous parle pas encore, il est détaillé dans 5 balises à connaître pour le head.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mon blog de voyage</title>
</head>
<body>
<header>
<p>Mon blog de voyage</p>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Derniers articles</h2>
<article>
<h3>Une semaine au Japon</h3>
<p>Le récit de mon voyage à Tokyo et Kyoto.</p>
</article>
<article>
<h3>Road trip en Écosse</h3>
<p>Cinq jours entre lochs et châteaux.</p>
</article>
</section>
<aside>
<h2>À propos</h2>
<p>Je voyage et je raconte.</p>
</aside>
</main>
<footer>
<p>Mentions légales - Contact</p>
</footer>
</body>
</html> Vous remarquez une septième balise : main. Elle ne fait pas partie de nos 6 balises d’architecture historiques, mais elle complète le tableau en englobant le contenu principal de la page. Règle simple : un seul main par page, directement sous le body.
Résultats mesurés sur cette page, sans la moindre ligne de CSS : les blocs s’empilent dans l’ordre du code (header en haut, puis main, puis footer), chacun occupe toute la largeur disponible (984 px dans ma fenêtre de 1000 px, la différence venant des marges par défaut du body), et l’aside se retrouve sous la section, pas à côté. Le schéma ci-dessous montre la structure visée une fois la mise en page appliquée.
Gardez enfin en tête qu’il ne s’agit que d’une possibilité parmi une infinité : c’est à vous de définir l’architecture en fonction de ce que vous voulez pour votre site. L’important est que chaque bloc utilise la balise qui correspond à son rôle.
Conclusion
Avec ces 6 balises, vous avez de quoi créer l’ossature complète des pages de votre site : header et footer pour encadrer la page, nav pour la navigation, section pour regrouper par thème, article pour les contenus autonomes et aside pour le complément. Et vous savez maintenant pourquoi les préférer aux div : le rendu visuel est identique, mais le sens transmis au navigateur, aux lecteurs d’écran et aux moteurs de recherche change du tout au tout. Il existe d’autres balises de structure comme details, summary ou hgroup, beaucoup moins utilisées : vous les croiserez plus tard.
Le squelette est en place, il reste à le remplir. C’est l’objet du cours suivant sur les balises pour structurer le texte : titres, paragraphes, listes et compagnie.
J’espère que ce cours vous a plu. Une question, un point resté flou ? Dites-le-moi en commentaire, je mets l’article à jour en fonction de vos retours.