Placer le contenu dans main, avec un seul main
Définissez l’unique région de contenu principal.
Placer le contenu dans main, avec un seul main est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
main est l’élément principal
Chaque page a une pièce maîtresse : son contenu unique. L’élément main contient ce contenu, séparé des en-têtes et des pieds de page.
Un seul main, toujours
Une page doit comporter exactement un repère main. Deux éléments main désorientent les utilisateurs, qui s’attendent à une seule destination principale.
Ce qui doit se trouver à l’intérieur
Placez le contenu essentiel de la page dans main : l’article, le formulaire ou le tableau de bord. C’est ce que l’utilisateur est réellement venu consulter.
<main>
<h1>Your dashboard</h1>
<p>Today's stats...</p>
</main>Ce qui reste à l’extérieur
Les éléments répétés, comme le logo du site, la navigation globale et les liens du pied de page, se trouvent à l’extérieur de main, car ils ne sont pas propres à cette page.
La cible du lien d’évitement
Un lien d’évitement pointe vers main afin que les utilisateurs au clavier puissent accéder directement au contenu, en évitant l’en-tête répété sur chaque page.
<a href="#main">Skip to content</a>
<main id="main">...</main>Rendre main sélectionnable
Ajoutez une valeur tabindex de -1 à main afin qu’un lien d’évitement puisse y déplacer le focus, sans rendre main accessible par tabulation de manière autonome.
<main id="main" tabindex="-1">
...
</main>Deux éléments main, une règle cachée
Si vous avez un jour besoin d’un deuxième élément main, tous les autres doivent être masqués. Un seul élément main visible est autorisé à la fois.
N’imbriquez pas main
L’élément main ne peut pas se trouver à l’intérieur de article, aside, nav, header ou footer. Il se situe au niveau supérieur du corps de votre page.
Le repli role main
Pour les navigateurs très anciens, vous pouvez ajouter role avec la valeur main comme solution de secours, mais l’élément main natif est le choix moderne approprié.
<main role="main">...</main>Pourquoi un seul main est utile
Avec un seul main, les utilisateurs de lecteurs d’écran appuient sur une touche et arrivent exactement sur le contenu, à chaque page et à chaque fois. 🎯
Une structure de page claire
En-tête, puis navigation, puis un seul élément main, puis pied de page. Cette structure prévisible permet de parcourir facilement une page à l’oreille.
Vérification rapide
Combien de repères main visibles une seule page doit-elle exposer ?
Récapitulatif : un main clair
Vous avez appris à placer le contenu unique dans un seul élément main, à conserver les éléments répétés à l’extérieur et à l’utiliser comme cible du lien d’évitement. 🙌
Questions Fréquemment Posées
La leçon « Placer le contenu dans main, avec un seul main » est-elle gratuite ?
Oui — le texte complet de « Placer le contenu dans main, avec un seul main » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Placer le contenu dans main, avec un seul main » ?
Définissez l’unique région de contenu principal. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Placer le contenu dans main, avec un seul main » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- header, nav, main, footer : les quatre grands éléments
- Placer le contenu dans main, avec un seul main
- Nommer plusieurs régions avec aria-label
- Navigation par repères : comment les utilisateurs se déplacent