Putting Content in main and Only One main
Define the single primary content region.
Putting Content in main and Only One main is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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. 🙌
Frequently asked questions
Is the “Putting Content in main and Only One main” lesson free?
Yes — the full text of “Putting Content in main and Only One main” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Putting Content in main and Only One main”?
Define the single primary content region. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Putting Content in main and Only One main” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- header, nav, main, footer: The Big Four
- Putting Content in main and Only One main
- Naming Multiple Regions With aria-label
- Landmark Navigation: How Users Jump Around