<main> : l'élément de contenu principal
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <main> représente le contenu principal du corps (<body>) d'un document. La zone de contenu principal se compose de contenu directement lié ou qui développe le sujet central d'un document, ou la fonctionnalité centrale d'une application.
Exemple interactif
<header>Faits sur les geckos</header>
<main>
<p>
Les geckos sont un groupe de lézards généralement petits et nocturnes. Ils
se trouvent sur tous les continents sauf l'Antarctique.
</p>
<p>
De nombreuses espèces de geckos possèdent des coussinets adhésifs sur leurs
doigts, ce qui leur permet de grimper aux murs et même aux fenêtres.
</p>
</main>
header {
font:
bold 7vw Arial,
sans-serif;
}
Un document ne doit pas comporter plus d'un élément <main> qui ne possède pas l'attribut hidden défini.
Attributs
Cet élément inclut uniquement les attributs universels.
Notes
Le contenu d'un élément <main> doit être unique au document. Le contenu répété dans un ensemble de documents ou de sections de document, comme les barres latérales, les liens de navigation, les informations sur le droit d'auteur, les logos du site et les formulaires de recherche, ne doit pas être inclus, sauf si le formulaire de recherche constitue la fonctionnalité principale de la page.
<main> ne contribue pas à la structure du document ; c'est-à-dire que, contrairement à des éléments HTML comme <body>, des titres comme <h2>, etc., <main> n'affecte pas la notion de structure de page du DOM. Il est strictement informatif.
Accessibilité
Point de repère
L'élément <main> a le rôle d'un repère main. Les repères peuvent être utilisées par les technologies d'assistance pour identifier et naviguer rapidement entre les grandes sections du document. Il est préférable d'utiliser l'élément <main> plutôt que de déclarer role="main", sauf en cas de problèmes de prise en charge des anciens navigateurs.
Navigation rapide
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.
<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.
Exemples
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
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> (angl.).
|
| Rôle ARIA implicite |
main
|
| Rôles ARIA autorisés | Aucun role autorisé |
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-main-element |