Qu'est-ce que la balise main ?
La balise HTML <main> identifie le contenu central et unique d'une page web, essentiel pour le SEO et l'accessibilité (A11y).
Qu'est-ce que la balise <main> ?
La balise <main> est un élément sémantique HTML5 qui sert d'enveloppe au contenu principal de votre document. Contrairement au header (en-tête), au footer (pied de page) ou aux sidebars (barres latérales) qui se répètent souvent sur l'ensemble d'un site, le contenu à l'intérieur de la balise <main> est censé être unique à la page consultée.
Son rôle est double : il aide les moteurs de recherche à comprendre où se trouve la valeur ajoutée de votre page et permet aux technologies d'assistance (lecteurs d'écran) de naviguer plus rapidement.
Pourquoi la balise <main> est-elle indispensable ?
L'utilisation de cette balise ne modifie pas l'apparence visuelle de votre site, mais elle structure "l'arbre sémantique" de votre page :
- Accessibilité (A11y) : Les utilisateurs malvoyants utilisent des raccourcis clavier pour sauter directement au contenu principal. Sans la balise <main>, ils doivent souvent "écouter" tout le menu de navigation avant d'arriver au texte.
- SEO (Référencement naturel) : Google accorde plus de poids aux mots-clés et aux liens situés dans le corps principal du texte. En isolant ce contenu dans une balise dédiée, vous envoyez un signal clair sur la hiérarchie de vos informations.
- Éviter la confusion : Elle permet de distinguer le contenu informatif des éléments de navigation globale.
Les règles d'or de la balise <main>
Pour que votre code soit valide et efficace, il faut respecter quelques principes :
- L'unicité : Il ne doit y avoir qu'une seule balise <main> visible par page.
- L'exclusion : Elle ne doit pas être imbriquée à l'intérieur d'un <article>, <aside>, <footer>, <header> ou <nav>. Elle est la "reine" de la zone de contenu.
- Contenu spécifique : Tout ce qui est commun à tout le site (logo, liens de réseaux sociaux en pied de page, barres de recherche globales) doit rester en dehors du <main>.
Comment configurer la balise <main> dans Webflow ?
Dans Webflow, par défaut, tous les éléments sont des <div>. Pour transformer un conteneur en balise <main>, c'est très simple :
- Sélectionnez votre section ou votre div qui contient tout votre contenu (souvent située entre votre Navbar et votre Footer).
- Allez dans le panneau Settings (touche D).
- Sous la section Tag, remplacez div par main dans le menu déroulant.
Astuce d'expert : Si vous utilisez des composants pour votre Header et votre Footer, assurez-vous que votre "Main Wrapper" sur chaque page possède bien ce tag pour garantir une structure sémantique parfaite sur tout votre projet.