Structure sémantique de la page

La plupart des pages ont à peu près la même forme : un en-tête, un menu, le contenu principal et un pied de page. HTML a un élément pour chacun, et les lecteurs d'écran permettent d'y sauter directement.

De la soupe de div aux points de repère

Pendant des années, les pages ont été construites avec des éléments <div> portant des noms de classe comme header ou menu. Un <div> est une boîte générique sans aucun sens : le nom de classe était le seul indice, et seules les personnes qui lisaient le code pouvaient le voir. HTML a maintenant des éléments qui disent ce qu'est chaque région. Les navigateurs, les moteurs de recherche et les technologies d'assistance les comprennent, et les utilisateurs de lecteurs d'écran peuvent ouvrir la liste de ces régions, appelées points de repère (landmarks), et sauter à celle qu'ils veulent, comme les personnes voyantes jettent un coup d'œil à la mise en page.

Les régions principales

• <header> : contenu d'introduction, en général le nom ou le logo du site et souvent le menu principal. Un article peut aussi avoir son propre header.
• <nav> : un bloc de liens de navigation importants, comme le menu du site ou une table des matières. Tout groupe de liens n'en a pas besoin.
• <main> : le contenu propre à cette page. Utilise exactement un <main> visible par page, et ne le place pas dans header, nav, aside ou footer.
• <article> : un morceau autonome qui aurait du sens tout seul, comme un billet de blog, un article d'actualité ou une fiche produit.
• <section> : une partie thématique d'une page ou d'un article, en principe avec son propre titre.
• <aside> : un contenu lié au contenu principal mais séparé de lui, comme une barre latérale, un encadré de glossaire ou des liens connexes.
• <footer> : des informations de fin, comme l'auteur, le copyright et les liens de contact.

Ces éléments décrivent le sens, pas la position. Un <nav> n'est pas forcément en haut, et un <aside> n'est pas forcément à droite ; sur un téléphone, l'aside finit en général sous le contenu principal. Les positions viennent de CSS. Choisis l'élément en te demandant ce qu'est le contenu, de la même façon que tu as choisi les niveaux de titre selon la structure plutôt que selon la taille.

article ou section ?

La question à se poser : ce morceau aurait-il du sens tout seul ailleurs, par exemple dans un lecteur d'actualités ou partagé sous forme de lien ? Si oui, c'est un <article>. S'il n'a de sens que comme partie d'un ensemble plus grand, comme la partie Ingrédients d'une recette, c'est une <section>. Les deux commencent normalement par un titre. Les articles peuvent contenir des sections, et une section peut contenir des articles, comme une section Derniers billets qui contient plusieurs fiches de billets.

div et span ont encore leur place

Quand aucun élément ne convient, utilise <div> pour un bloc et <span> pour quelques mots dans une ligne. Ils sont utiles comme points d'accroche pour CSS, par exemple un <div class="cards"> qui dispose des fiches en grille. La règle : cherche d'abord un élément qui a du sens, et ne te rabats sur un élément générique que si rien ne décrit le contenu. Une page faite uniquement de div fonctionne, mais elle cache sa structure à tous ceux qui ne regardent pas le code.

Un test rapide : ouvre ta page avec CSS désactivé, ou lis le plan des titres et des points de repère qu'affiche une extension de navigateur. Si la page se lit toujours dans un ordre logique, avec un en-tête, un menu, un contenu principal et un pied de page bien clairs, la structure fait son travail.

Les éléments natifs avant ARIA

Tu croiseras peut-être l'attribut role, qui fait partie d'une norme du W3C appelée WAI-ARIA, écrit sous la forme <div role="navigation">. Il donne à un élément générique un sens pour les technologies d'assistance. Le guide du W3C sur l'utilisation d'ARIA commence par une règle simple : si un élément HTML natif a déjà le sens dont tu as besoin, utilise-le. <nav> est plus court, fonctionne partout et ne peut pas être oublié à un endroit et pensé à un autre. La même idée vaut pour les boutons : un vrai <button> reçoit le focus avec Tab et s'active avec Entrée ou Espace sans rien faire de plus, alors qu'un <div> cliquable a besoin de code supplémentaire pour en faire autant.