header, nav, main, footer: The Big Four
Wrap your page in the regions users expect.
header, nav, main, footer: The Big Four is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 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.
A Map for Your Page
Sighted users scan a page in a glance. Screen reader users need a map, and HTML5 landmark elements draw it for them.
Meet the Big Four
Four elements cover most pages: header, nav, main, and footer. Together they split your layout into regions users can jump between. 🗺️
header: The Top Banner
A page-level header holds your site name, logo, and intro content. Screen readers expose it as the banner region.
<header>
<h1>CoddyKit</h1>
</header>nav: Where Links Live
Wrap your primary set of links in nav. It tells assistive tech this block is navigation, so users can find or skip it fast.
<nav>
<a href="/">Home</a>
<a href="/docs">Docs</a>
</nav>main: The Real Content
The main element wraps the unique content of the page. It is the destination users care about most.
<main>
<h1>Article title</h1>
<p>Body...</p>
</main>footer: The Bottom Region
A page-level footer holds copyright, legal links, and contact info. Screen readers announce it as the contentinfo region.
<footer>
<p>© 2026 CoddyKit</p>
</footer>Implicit Roles for Free
These tags carry built-in ARIA roles, so header becomes banner and nav becomes navigation with zero extra attributes.
Context Changes the Role
A header inside an article is just a section header, not the page banner. Only a top-level header counts as the banner landmark.
Why div Cannot Do This
A div has no role, so a screen reader sees nothing to jump to. Landmark tags turn invisible structure into real navigation.
<div class="nav">...</div>A Whole Page Mapped
Stack the four together and a screen reader user instantly hears the shape of your page before reading a word. 🎯
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Free Skip-Ahead Power
With landmarks in place, users can jump past the header straight to main, skipping repeated links on every page.
Quick Check
Which landmark wraps the unique, primary content of a page?
Recap: The Big Four
You learned that header, nav, main, and footer give screen reader users a map. Native tags mean free landmark roles. 🙌
Frequently asked questions
Is the “header, nav, main, footer: The Big Four” lesson free?
Yes — the full text of “header, nav, main, footer: The Big Four” 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 “header, nav, main, footer: The Big Four”?
Wrap your page in the regions users expect. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “header, nav, main, footer: The Big Four” 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