Page Landmarks: header, nav, main and footer
Four elements divide a page into regions a screen reader can jump between. Learn the rules for each, including the one that says main appears exactly once.
-
HTML Basics
- What is HTML: The Structure Layer of Every Web Page
- HTML Document Structure: DOCTYPE, html, head and body
- Elements, Tags and Attributes: The Vocabulary of HTML
- HTML Comments: Notes That Ship With Your Code
- Block Level and Inline Elements
- Writing and Running Your First HTML Page
- How a Browser Turns Markup Into a Page
- Text and Formatting
- Links and Navigation
- Images and Media
- Lists
- Tables
-
Forms
- Form Structure: form, action and method
- Input Types: Text, Email, Number, Date and the Rest
- Labels: The Most Important Element in a Form
- Checkboxes, Radio Buttons and Grouping
- select, option, optgroup and datalist
- textarea, File Uploads and Hidden Fields
- Buttons: submit, reset and button
- Built In Form Validation
- GET or POST: What Happens When a Form Is Submitted
- Semantic HTML
- HTML5 Features
- Head and Metadata
- HTML with CSS
- HTML with JavaScript
- Accessibility
-
HTML SEO
- How Google Works: Crawling, Indexing and Ranking
- SEO Friendly HTML Structure
- Titles and Descriptions That Earn Clicks
- Headings and Content Structure for Search
- Internal Linking and Anchor Text
- robots.txt and XML Sitemaps
- Canonical URLs and Duplicate Content
- Structured Data and JSON-LD
- Image SEO
- Core Web Vitals and Mobile Friendliness
- DevTools and Debugging
- Editor Productivity
- HTML Best Practices
- HTML Projects
- Advanced Projects
- Practice and Exams
Concept
Four elements mark the major regions of a page. Together they form the landmark structure that assistive technology uses to move around a document without reading it top to bottom.
| Element | ARIA landmark | Holds |
|---|---|---|
header | banner (at page level) | Introductory content for the page or a section |
nav | navigation | A block of navigation links |
main | main | The unique content of this page |
footer | contentinfo (at page level) | Closing information for the page or a section |
Syntax
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<a href="/"><img src="/logo.svg" alt="Riverside College home" width="140" height="40"></a>
<nav aria-label="Main">
<ul>
<li><a href="/courses">Courses</a></li>
<li><a href="/admission" aria-current="page">Admission</a></li>
</ul>
</nav>
</header>
<main id="main-content" tabindex="-1">
<h1>Admission 2026</h1>
<p>Applications open on 1 June.</p>
</main>
<footer>
<nav aria-label="Footer">
<ul>
<li><a href="/privacy">Privacy</a></li>
</ul>
</nav>
<p><small>Riverside College, Pune</small></p>
</footer>
</body>main
The strictest of the four, and the most valuable.
- Exactly one per page, and it must be visible. More than one visible
mainis invalid. - It holds content unique to this page. Anything repeated across pages - the site header, the navigation, the footer, a sitewide sidebar - belongs outside it.
- It must not be nested inside
article,aside,header,footerornav.
Pair it with a skip link. tabindex="-1" on the main makes it programmatically focusable, so the skip link moves keyboard focus there rather than only scrolling.
header
Introductory content. Its meaning depends on where it sits:
- As a direct child of
body, it is the page banner: logo, site name, main navigation, search. - Inside an
articleorsection, it is that section introduction - a heading, a byline, a date - and it is not a landmark.
<article>
<header>
<h2>Reading a bus timetable</h2>
<p>By Meera Iyer, <time datetime="2026-03-02">2 March 2026</time></p>
</header>
<p>...</p>
</article>A page may have many header elements, but only one at body level.
footer
The same pattern. At body level it is the site footer - copyright, contact, secondary links. Inside an article it is that article footer - tags, author bio, share links.
<article>
<h2>Reading a bus timetable</h2>
<p>...</p>
<footer>
<p>Filed under <a href="/tags/transport">transport</a></p>
</footer>
</article>nav
For major blocks of navigation. Not every group of links needs one - a paragraph containing three links does not, and neither does a list of related articles.
Reasonable uses: the main menu, a breadcrumb trail, pagination, a table of contents, the footer link block.
When a page has several, label each one:
<nav aria-label="Main">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Pagination">...</nav>Do not put the word navigation in the label. The role is already announced, so aria-label="Main navigation" is read as main navigation navigation.
The other landmarks
| Element | Landmark | For |
|---|---|---|
aside | complementary | Tangentially related content |
section with a name | region | A significant named area |
form with a name | form | A significant form |
search | search | Search functionality |
The search element is a recent addition and worth adopting:
<search>
<form action="/search" method="get">
<label for="q">Search the site</label>
<input type="search" id="q" name="q">
<button type="submit">Search</button>
</form>
</search>A complete skeleton
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header> <!-- banner -->
<nav aria-label="Main">...</nav>
<search>...</search>
</header>
<nav aria-label="Breadcrumb">...</nav>
<main id="main-content" tabindex="-1">
<h1>...</h1>
<article>...</article>
</main>
<aside aria-label="Related courses">...</aside>
<footer> <!-- contentinfo -->
<nav aria-label="Footer">...</nav>
</footer>
</body>Important rules
- One visible
mainper page. - Everything meaningful should sit inside a landmark. Content adrift between them is harder to reach.
headerandfooterare landmarks only at body level.- Landmarks may not be nested inside one another except where the specification allows it.
- Do not add redundant roles:
<nav role="navigation">is noise. - Markup order is the order a keyboard travels, whatever CSS does visually.
Common mistakes
- Two
mainelements, usually from a template include. - No
mainat all, so the skip link has no target. - Wrapping the whole page in
main, including the header and footer. - Several
navelements with no labels. - Using
navfor every group of links. - Placing the sidebar before the main content in the source because that is where it appears visually.
- Adding
roleattributes that duplicate the element.
Best practices
- Start every page from the skeleton above.
- Skip link first, main content early in the source.
- Label every
nav, and everyasidewhen there is more than one. - Put main content before the sidebar in markup and reorder visually with CSS.
- Check the landmark list in the DevTools accessibility panel before shipping.
Practice
- Build the skeleton above and list the landmarks in the accessibility panel.
- Add a second
mainand run the validator. What does it say? - Give a page three
navelements without labels, listen with a screen reader, then add labels and compare. - Put the sidebar before the main content in the source, then reorder it with CSS grid. Tab through it and explain the problem.