<main>

La balise <main> sert à définir le contenu principal d'une page, c’est-à-dire celui qui est directement lié à son sujet principal.

Structure et syntaxe de la balise <main>

Structure et syntaxe de base

La balise <main> est une balise de conteneur utilisée pour englober le contenu principal. Elle possède :

• Une balise ouvrante <main> ;
• Une balise fermante </main>.

Sa structure est simple :

<main> <!-- Contenu principal de la page --> </main>

Exemple d’utilisation

Voici un exemple simple pour mieux comprendre son utilisation :

<main>
    <h1>Bienvenue sur mon site !</h1>
    <article>
        <h2>Article 1</h2>
        <p>Contenu de l'article.</p>
    </article>
</main>

Dans cet exemple, la balise <main> englobe tout le contenu principal, comme le titre principal et les articles.

Attributs

La balise <main> ne possède pas d’attributs spécifiques, mais elle peut utiliser les attributs globaux d’HTML, tels que id, class et style.

Bonnes pratiques

Pour optimiser l’utilisation de la balise <main>, respectez ces recommandations :

• Utilisez une seule balise <main> par page, car elle doit représenter le contenu principal unique.
• Évitez d’inclure des éléments comme les en-têtes (<header>), pieds de page (<footer>), ou barres de navigation (<nav>) dans <main>.

Différences avec d’autres balises similaires

• <section> : Utilisée pour regrouper du contenu thématique, elle ne remplace pas le rôle de la balise <main>. Vous pouvez toutefois ajouter autant de balises <section> que vous le souhaitez dans une balise <main>.
• <article> : Conçue pour un contenu autonome qui peut être redistribué (flux RSS par exemple), comme des articles de blog.
• <div> : Simple conteneur sans rôle particulier, contrairement à <main>.

Compatibilité des navigateurs

La balise <main> est compatible avec tous les navigateurs modernes.