Définition technique
Élément sémantique HTML5 <main> qui enveloppe le contenu principal de la page. Une seule occurrence par page (ou une par contexte si l’on utilise des landmarks cachés pour les SPA). Il exclut les blocs répétitifs : en-tête, pied de page, navigation, sidebars secondaires. Utilisé par les lecteurs d’écran et la navigation au clavier pour accéder directement au contenu ; les moteurs s’appuient sur cette structure pour distinguer le contenu principal du chrome (menus, footer). Le contenu à l’intérieur de <main> est considéré comme le cœur de la page ; les sidebars optionnelles peuvent être dans <aside>. Un skip link « Aller au contenu » cible souvent l’id du <main> pour permettre de sauter la navigation.
Comment ça fonctionne ?
Un seul élément <main> par page enveloppe tout le contenu principal (hors header, nav, footer). Les lecteurs d'écran proposent un saut direct vers ce landmark. Un skip link « Aller au contenu » pointe en général vers l'id du main.
L'erreur classique à éviter
Mettre plusieurs <main> visibles sur la page, ou oublier le main et laisser tout dans des div. Inversement, mettre la navigation ou le footer à l'intérieur du main dilue le sens du landmark.
Impact business : pourquoi s'en soucier ?
La balise main améliore l’accessibilité (conformité WCAG, UX pour les utilisateurs au clavier ou avec lecteur d’écran) et donne un repère sémantique clair pour le SEO. Son absence ne casse pas le site mais fait perdre un signal de qualité et de professionnalisme. Les crawlers et les technologies d’assistance utilisent les landmarks pour proposer une navigation rapide. Sur des pages longues, le main délimite clairement la zone de contenu unique, ce qui renforce la compréhension du document.
La règle d'or
Une seule balise <main> par page, qui contient uniquement le contenu principal. Exclure header, nav, aside et footer. Donner un id au main pour le skip link et tester la navigation au clavier.