Aller au contenu principal

La balise main

Notions théoriques​

Dans la séance précédente, vous avez découvert les balises sémantiques <header>, <footer>, <section>, <article> et <nav> pour structurer une page.

Il manque une balise essentielle : la balise <main>.

La balise <main> permet d'indiquer le contenu principal d'une page HTML, c'est-à-dire le contenu qui est unique à cette page et qui ne se répète pas d'une page à l'autre (contrairement à un <header> ou un <footer>, souvent identiques sur toutes les pages d'un site).

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

    <main>
        <h2>Contenu principal de la page</h2>
        <p>C'est ici que se trouve l'information propre à cette page.</p>
    </main>

    <footer>
        <p>Pied de page</p>
    </footer>
</body>
attention

Une page HTML ne doit contenir qu'une seule balise <main>. Si votre page a plusieurs sections principales, utilisez plusieurs <section> à l'intérieur d'un seul <main>.

Bonne pratique - Utilité de la balise main

La balise <main> aide les lecteurs d'écran et les moteurs de recherche à identifier immédiatement le contenu important d'une page, sans devoir parcourir le <header> ou la <nav> répétés sur chaque page.

Exemple pratique​

Reprenons l'exemple de la page structurée vue précédemment, et ajoutons la balise <main> autour du contenu qui change d'une page à l'autre :

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Ma page</title>
</head>
<body>
    <header>
        <h1>Bienvenue sur ma page !</h1>
    </header>

    <main>
        <section>
            <h2>A propos de moi</h2>
            <p>Je suis un passionné de Web !</p>
        </section>
    </main>

    <footer>
        <p>Contactez-moi à monadresse@email.com</p>
    </footer>
</body>
</html>

La balise <header> et la balise <footer> restent en dehors du <main>, car elles ne font pas partie du contenu principal, propre à cette page.

Les balises à connaître​

  • <main> : Définit le contenu principal, unique, d'une page HTML. Une seule balise <main> par page.

Test de mémorisation/compréhension​


A quoi sert la balise <main> ?


Combien de balises <main> une page HTML peut-elle contenir ?


Laquelle de ces balises fait généralement partie du contenu placé À L'INTÉRIEUR de <main> ?


Pourquoi utiliser la balise <main> plutôt qu'une simple <div> ?


TP pour réfléchir et résoudre des problèmes​

Vous allez reprendre la page de votre jeu vidéo préféré, réalisée lors de la séance sur la structuration d'une page, et y ajouter la balise <main>.

  1. Ouvrez le fichier index.html de votre TP tp_jeu_prefere.

  2. Repérez le <header> et le <footer> de votre page.

  3. Enveloppez tout le contenu qui se trouve entre le <header> et le <footer> avec une balise <main>.

Bonne pratique - Un seul contenu principal

Si votre page contient déjà une <nav> juste après le <header>, celle-ci reste en dehors du <main> : elle se répète sur toutes les pages du site, elle n'est donc pas propre au contenu de cette page.

📌 Une solution