structure block

<main>

Délimite le contenu principal et unique de la page, excluant les éléments récurrents comme l'en-tête, le pied de page et la navigation.

Description

L’élément <main> identifie la zone de contenu principal du document. Son contenu est directement lié à la fonctionnalité centrale de la page. Les éléments récurrents (logo, navigation, pied de page, fil d’Ariane) ne font pas partie de <main>.

Un seul <main> visible doit être présent dans le document. Il ne doit pas être descendant d’un <article>, <aside>, <footer>, <header> ou <nav>.

Syntaxe

<main>
  <h1>Titre principal</h1>
  <p>Contenu unique de cette page.</p>
</main>

Exemples

Page d’article :

<body>
  <header>…</header>
  <main>
    <article>
      <h1>Mon article</h1>
      <p>…</p>
    </article>
  </main>
  <footer>…</footer>
</body>

Avec un lien d’évitement :

<a href="#contenu-principal" class="skip-link">Aller au contenu</a>
<header>…</header>
<main id="contenu-principal">
  <h1>…</h1>
</main>

Notes

Landmark main : <main> crée automatiquement un landmark ARIA main, permettant aux utilisateurs de lecteurs d’écran d’y accéder directement via les raccourcis de navigation par landmarks.

Lien d’évitement : combiner <main id="contenu-principal"> avec un lien d’évitement <a href="#contenu-principal"> est une pratique d’accessibilité fondamentale pour les utilisateurs naviguant au clavier.

Support navigateurs

Chrome26+ · Firefox21+ · Safari7+ · Edge12+