Coloque el contenido en main y use un único main
Defina la única región de contenido principal.
Coloque el contenido en main y use un único main es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
main Is the Headline Act
Every page has one star: its unique content. The main element is where that content lives, separate from headers and footers.
One main, Always
A page should have exactly one main landmark. Two mains confuse users, who expect a single primary destination.
What Belongs Inside
Put the page's core content in main: the article, the form, the dashboard. The thing the user actually came for.
<main>
<h1>Your dashboard</h1>
<p>Today's stats...</p>
</main>What Stays Outside
Repeated stuff like the site logo, global nav, and footer links live outside main, since they are not unique to this page.
The Skip-Link Target
A skip link points to main so keyboard users can jump straight to content, past the repeated header on every page.
<a href="#main">Skip to content</a>
<main id="main">...</main>Make main Focusable
Add tabindex of -1 to main so a skip link can move focus into it without making it tabbable on its own.
<main id="main" tabindex="-1">
...
</main>Two mains, Hidden Rule
If you ever need a second main, all but one must be hidden from view. Only a single visible main is allowed at a time.
Do Not Nest main
The main element cannot live inside article, aside, nav, header, or footer. It sits at the top level of your page body.
The role main Fallback
For very old browsers you can add role of main as a backup, but the native main element is the right modern choice.
<main role="main">...</main>Why One main Helps
With a single main, screen reader users press one key and land exactly on the content, every page, every time. 🎯
A Clean Page Shape
Header, then nav, then one main, then footer. That predictable shape is what makes a page easy to scan by ear.
Quick Check
How many visible main landmarks should a single page expose?
Recap: One Clear main
You learned to put unique content in a single main, keep repeated parts outside, and use it as the skip-link target. 🙌
Preguntas frecuentes
¿La lección «Coloque el contenido en main y use un único main» es gratis?
Sí — el texto completo de «Coloque el contenido en main y use un único main» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Coloque el contenido en main y use un único main»?
Defina la única región de contenido principal. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Coloque el contenido en main y use un único main»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- header, nav, main y footer: los cuatro grandes
- Coloque el contenido en main y use un único main
- Nombre varias regiones con aria-label
- Navegación por landmarks: cómo se desplazan los usuarios