À quoi sert la balise main en HTML5 pour l’accessibilité ?

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.

Peut-on avoir plusieurs balises main sur une page ?

En HTML5, un seul visible par page est recommandé. Plusieurs 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 .

La balise main a-t-elle un impact sur le référencement ?

Indirectement. Google utilise la structure sémantique pour comprendre la page ; un contenu bien délimité dans 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é.

Qu'est-ce que Balise main ?

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.

L'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.

Bonnes pratiques vs Erreurs communes

✅ À faire : 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.
❌ À é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.

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].