English

<main>

Dire au navigateur "c'est ici que ça se passe"

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • structure

<main> — Le contenu principal

La balise <main> délimite le contenu principal de ta page : celui qui est unique et qui ne se retrouve pas d'une page à l'autre. Il ne doit y avoir qu'un seul <main> visible par page.

Quand l'utiliser

Tu veux encadrer le contenu central de ta page, celui qui exclut l'en-tête, le pied de page, la navigation et les barres latérales répétées sur tout le site. Si tu as un blog, c'est l'article. Si tu as un formulaire de contact, c'est le formulaire.

Ce que tu gagnes

Accessibilité : les lecteurs d'écran proposent un raccourci pour sauter directement au <main>. Sans lui, l'utilisateur doit traverser toute la navigation à chaque page.

Exemple de code

<body>
  <header><!-- site header --></header>
  <nav><!-- primary navigation --></nav>
  <main>
    <h1>How to structure a page</h1>
    <p>The main content lives here.</p>
  </main>
  <footer><!-- site footer --></footer>
</body>

Pour aller plus loin