<main>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'élément HTML <main> représente le contenu majoritaire du <body> du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d'une application.

Un document ne peut pas avoir plus d'un seul élément <main> sans attribut hidden.

Exemple interactif

Attributs

Cet élément prend uniquement en charge les attributs universels.

Notes

  • Ce contenu doit être unique dans le document, excluant tout contenu qui est répété sur plusieurs documents comme des barres latérales, liens de navigation, informations relative au droit d'auteur, logo du site, et champs de recherche (sauf, bien entendu, si la fonctionnalité principale du document est un champ de recherche).
  • <main> ne contribue pas au plan du document. Autrement dit, à la différence d'éléments tels que <body>, les niveaux de titre comme <h2>, etc. <main> n'affecte pas la structure même de la page, c'est un élément purement informatif.

Exemples

HTML

html
<!-- autre contenu -->

<main>
  <h1>Pommes</h1>
  <p>La pomme est le fruit à pépin du pommier.</p>

  <article>
    <h2>Pomme rouge</h2>
    <p>Ce sont des pommes rouges vives très communes dans les supermarchés.</p>
    <p></p>
    <p>...</p>
    <p>...</p>
  </article>

  <article>
    <h2>La Granny Smith</h2>
    <p>
      Ces pommes juteuses, vertes, font une très belle garniture pour les tartes
      aux pommes.
    </p>
    <p></p>
    <p>...</p>
    <p>...</p>
  </article>
</main>

<!-- Autre contenu -->

Résultat

Accessibilité

Balisage du document

L'élément <main> a le rôle d'une balise main. Dans le contexte de l'accessibilité, les balises peuvent être utilisées par les outils d'assistance afin d'identifier et de naviguer rapidement entre les grandes sections d'un document. On privilégiera l'élément <main> à l'ajout du role="main", à moins qu'il faille prendre en charge d'anciens navigateurs.

La navigation rapide (aussi appelée skip navigation ou skipnav en anglais) est une technique permettant aux outils d'assistance de passer certaines sections de contenu répétés (menu de navigation, bannières, etc.). Cela permet à l'utilisateur d'accéder plus rapidement au contenu principal de la page.

Ajouter un attribut id à l'élément <main> lui permet d'être une cible pour la navigation rapide.

html
<body>
  <a href="#main-content">Aller au contenu principal</a>

  <!-- Contenu relatif à la navigation et en-tête du document -->

  <main id="main-content">
    <!-- Contenu principal de la page -->
  </main>
</body>

Mode lecture

Les fonctionnalités « mode lecture » d'un navigateur vérifient la présence d'un élément <main> ainsi que la présence de titres et de sections lors de la convertion du document pour le mode lecture.

Résumé technique

Categories de contenu Contenu de flux, contenu tangible.
Contenu autorisé Contenu de flux.
Omission de balise Aucune, les balises d'ouverture et de fermeture sont toutes les deux obligatoires.
Éléments parents autorisés Tout élément qui accepte du contenu de flux, uniquement si c'est un élément hiérarchiquement correct pour un élément <main>.
Rôles ARIA autorisés Le rôle main est appliqué à <main> par défaut, et le rôle presentation est également autorisé.
Interface DOM HTMLElement

Spécifications

Specification
HTML Standard
# the-main-element

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi