Colocando conteúdo em main e apenas um main
Defina a única região de conteúdo principal.
Colocando conteúdo em main e apenas um main é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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. 🙌
Perguntas Frequentes
A aula “Colocando conteúdo em main e apenas um main” é grátis?
Sim — o texto completo de “Colocando conteúdo em main e apenas um main” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Colocando conteúdo em main e apenas um main”?
Defina a única região de conteúdo principal. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Colocando conteúdo em main e apenas um main”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- header, nav, main, footer: os quatro grandes
- Colocando conteúdo em main e apenas um main
- Nomeando várias regiões com aria-label
- Navegação por marcos: como os usuários se deslocam