Balises sémantiques : header, nav, main, article, footer

Le HTML sémantique utilise des éléments qui décrivent la signification du contenu, et pas seulement son apparence. <article> indique « ceci est un contenu autonome ». Un <div> générique n’indique rien.

Les premiers développeurs web construisaient leurs mises en page entièrement avec des éléments <div> et <span>. Les lecteurs d’écran ne pouvaient pas distinguer la navigation, le contenu et les publicités. Les moteurs de recherche devaient deviner la structure de la page.

L’élément <header> contient le contenu introductif de la page ou d’une section : généralement le logo, le nom du site et la navigation. Une page peut comporter plusieurs en-têtes — un pour le site et un par article.

Utilisez <nav> pour regrouper des ensembles de liens de navigation : le menu principal, un fil d’Ariane ou une table des matières. Les lecteurs d’écran annoncent les repères de navigation afin que les utilisateurs puissent y accéder directement ou les dépasser.

Une page doit contenir exactement un élément <main>. Il contient le contenu dominant propre à cette page, et non des éléments répétés comme la navigation ou le pied de page. Les technologies d’assistance permettent aux utilisateurs d’accéder directement à main.

<article> englobe un contenu qui a du sens en lui-même et pourrait être diffusé ailleurs : un billet de blog, une actualité, un commentaire d’utilisateur ou une fiche produit. Demandez-vous : « Ce contenu aurait-il du sens si je le copiais sur un autre site ? »

<section> regroupe des contenus associés qui vont ensemble : chapitres, onglets ou domaines thématiques. Chaque section possède généralement un titre. Si le contenu peut être autonome, utilisez plutôt article.

<aside> contient du contenu lié indirectement au contenu environnant : barres latérales, citations en exergue, publicités ou liens associés. Les lecteurs d’écran le présentent comme un repère complémentaire.

<footer> contient des informations sur l’élément qui l’englobe : mentions de droits d’auteur, liens de contact ou documents associés. Comme pour header, une page peut comporter plusieurs pieds de page.

Utilisez les titres pour créer une structure logique du document. Une page ne doit contenir qu’un seul <h1>. Les sous-titres utilisent h2, les sous-sous-titres utilisent h3, et ainsi de suite. Ne sautez pas de niveaux et n’utilisez pas les titres uniquement pour leur taille visuelle.

Les moteurs de recherche utilisent la structure sémantique pour comprendre le contenu d’une page — une page avec des repères et une hiérarchie de titres appropriés est souvent mieux classée. Les utilisateurs de lecteurs d’écran naviguent à l’aide des repères et des titres, ce qui fait de la sémantique un enjeu direct d’accessibilité.

Quel élément doit englober le contenu principal propre à la page et apparaître exactement une fois ?

Utilisez <header>, <nav>, <main>, <article>, <section>, <aside> et <footer> pour donner à votre document une structure comprise par les navigateurs, les moteurs de recherche et les lecteurs d’écran.