La balise `<main>`¶

La balise <main> est utilisée pour délimiter le contenu principal d'une page Web.

Lorsque le navigateur rencontre une balise <main> il identifie cette section comme le contenu principal du document, c'est-à-dire l'information directement reliée au sujet de la page.
Le contenu placé dans la balise <main> exclut les éléments répétés d'une page à l'autre, tels que l'en-tête (<header>), la navigation (<nav>) ou le pied de page (<footer>).
Les technologies d'assistance utilisent cette balise pour permettre aux utilisateurs d'accéder rapidement au contenu principal.
La balise <main> est une balise sémantique de type block par défaut.
Parce qu'il s'agit d'un élément conteneur, une balise de fermeture </main> est nécessaire pour indiquer où le contenu principal se termine.

Bonnes pratiques¶

Il est recommandé :

d'utiliser une seule balise <main> par page;
d'y placer le contenu principal relié au sujet de la page;
d'exclure les menus, les barres latérales et les informations répétitives;
d'utiliser des balises structurantes comme <section> à l'intérieur du <main> lorsque cela est pertinent;
d'utiliser le CSS pour personnaliser l'apparence de la zone principale;
de conserver une structure logique et facile à comprendre.

SEO¶

La balise <main> aide les moteurs de recherche à mieux comprendre quel contenu constitue le sujet principal de la page.

Bien qu'elle n'améliore pas directement le référencement, elle contribue à une structure sémantique plus claire et plus facile à analyser par les robots d'indexation.

Exemples¶

Structure simple d'une page¶

<body>
    <header>
        <h1>Mon site Web</h1>
    </header>

    <nav>
        ...
    </nav>

    <main>
        <h2>Bienvenue</h2>
        <p>Contenu principal de la page.</p>
    </main>

    <footer>
        ...
    </footer>
</body>

Utilisation avec des sections¶

<main>
    <section>
        <h2>Actualités</h2>
        <p>Dernières nouvelles de l'entreprise.</p>
    </section>

    <section>
        <h2>Événements</h2>
        <p>Liste des événements à venir.</p>
    </section>
</main>

La balise <main>¶