Structure & Accessibilité
Qu’est-ce que Balise main ?
Élément sémantique HTML5 <main> qui enveloppe le contenu principal de la page.
Définition simple
C'est comme encadrer la salle d'exposition au milieu du hall d'accueil : on sépare ce qui est unique de ce qui se répète sur chaque visite. É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 marche ?
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.
Impact business
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. Les audits d’accessibilité sur de grands sites vitrine estiment encore 30 % à 50 % des gabarits sans <main> explicite : corriger le modèle de page propage le bénéfice à tout le catalogue sans retoucher chaque contenu au détail.
Bonnes pratiques
- 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.
Erreurs communes
- 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.
Prompt IA
Contexte : page [type : article / landing / e-commerce avec sidebar]. Schématise la structure HTML5 (header, nav, main, aside, footer) et liste ce qui doit aller dans <main> vs header/footer/aside pour ce type. Donne un extrait HTML minimal avec un skip link vers #main. Indique comment gérer [cas : deux colonnes de contenu principal].
SERVICE LIÉ
Passer de la définition à un projet concret.
Création de site internet
Approfondir ce sujet dans le cadre d’un accompagnement adapté à votre contexte.
À LIRE AUSSI
Guides plus complets sur le blog.
QUESTIONS FRÉQUENTES
Aller plus loin sur Balise main.
Elle délimite le contenu principal de la page. Les lecteurs d’écran peuvent proposer un saut direct vers ce contenu (landmark « main »), ce qui évite de réécouter le header et la navigation à chaque page. En combinaison avec un skip link « Aller au contenu », l’utilisateur au clavier accède plus vite au cœur de la page.
En HTML5, un seul <main> visible par page est recommandé. Plusieurs <main> sont autorisés seulement si les autres sont cachés (ex. contenu alternatif pour SPA). En pratique, une page = un main qui enveloppe tout le contenu principal. Les sidebars ou colonnes secondaires vont dans <aside>.
Indirectement. Google utilise la structure sémantique pour comprendre la page ; un contenu bien délimité dans <main> aide à identifier le sujet principal. Ce n’est pas un facteur de classement direct, mais une bonne structure améliore l’analyse du contenu et peut soutenir les signaux de qualité et d’accessibilité.