How to Use the <main> Landmark in HTML: Complete Guide (2026)

Saar TwitoPublished May 21, 2025Updated April 30, 20269 min read

Saar TwitoFounder & SEO Engineer

Hi, I'm Saar - a software engineer, SEO specialist, and lecturer who loves building tools and teaching tech.

What Is the <main> Landmark?

The <main> element wraps the primary content of a page — the unique content that distinguishes this page from every other page on the site. It is a landmark that screen readers, search engines, and AI crawlers use to skip directly to "the actual content," past navigation, banners, and sidebars. Every page should have exactly one.

Key Facts (TL;DR)

WCAG 2.2 SC 1.3.1 Info and Relationships (Level A): page structure must be programmatically determinable — landmarks satisfy this.
WCAG 2.2 SC 2.4.1 Bypass Blocks (Level A): users must be able to skip repeated blocks of content. A correctly placed <main> is one of the two recognized techniques (the other is a skip link).
The landmark-one-main rule: every page must contain exactly one <main> (or one element with role="main"). Zero is a failure. More than one is a failure.
Screen-reader navigation: in the WebAIM Screen Reader User Survey #10 (2024), 28.8% of respondents said they navigate by landmarks; ~67% navigate by heading and landmark together.
SEO + AI search: Google and generative engines (ChatGPT, Perplexity, Google AI Overviews) use the accessibility tree built from semantic HTML to identify primary content for citation.
Business impact: a missing <main> is one of the most common automated-audit failures — present on roughly 26% of the top one million home pages (WebAIM Million 2024).

Think of <main>the way you think of the table of contents in a book pointing at "Chapter 1." Without it, a screen-reader user has to listen to the cover, the dedication, the foreword, and the publisher's notes every single time they open a new page.

Why the <main> Landmark Matters

Screen-reader shortcut keys: users press a single key (D in NVDA, M in JAWS, or VO+U in VoiceOver) to jump to <main>. Without it, every visit forces them to tab through navigation, ads, and banners before reaching the content.
Bypass Blocks compliance: WCAG 2.4.1 explicitly recognizes a single <main> as a valid way to skip repeated blocks. It is the cleanest way to satisfy a Level A criterion.
SEO clarity: Google uses the <main> boundary to separate primary content from boilerplate (header, nav, footer). This influences how snippets and AI Overview citations are extracted from the page.
AI search visibility: generative engines parse the accessibility tree to identify what is being said on a page. A clear <main> boundary directly affects which paragraphs are extracted as a citation versus discarded as chrome.
Maintainability:a clear "this is the unique part of this page" boundary helps every downstream tool — translation services, reader-mode extensions, RSS extractors, print stylesheets — do the right thing automatically.

How the <main> Element Works

The HTML5 specification is precise: a document should have exactly one <main>, and its content must be the page's dominant content. It must not be a descendant of <article>, <aside>, <header>, <nav>, or <footer>.

What goes inside <main>: the page's unique content — the article, the product detail, the form, the search results.

What does NOT go inside <main>: site-wide navigation, the global header, the footer, the cookie banner, the language switcher, or sidebars that repeat across pages.

<!-- Bad: no <main> at all -->
<body>
  <header>...</header>
  <nav>...</nav>
  <div class="content">
    <h1>Article title</h1>
    <p>...</p>
  </div>
  <footer>...</footer>
</body>

<!-- Bad: multiple <main> elements (audit failure) -->
<body>
  <main>...</main>
  <main>...</main>
</body>

<!-- Bad: <main> wrapping the entire page chrome -->
<body>
  <main>
    <header>...</header>
    <nav>...</nav>
    <article>...</article>
    <footer>...</footer>
  </main>
</body>

<!-- Good: single <main>, chrome outside, skip-link target -->
<body>
  <a href="#main-content" class="skip-link">
    Skip to main content
  </a>
  <header>
    <nav aria-label="Primary">...</nav>
  </header>

  <main id="main-content">
    <h1>Article title</h1>
    <p>The unique content of this page lives here.</p>
  </main>

  <footer>...</footer>
</body>

How to Check Your Pages for the <main> Landmark

Greadme deep scan — flags pages missing <main> or containing more than one, and pairs each issue with an AI-generated fix or one-click GitHub PR.
Greadme crawler scan — checks the <main> landmark across every indexable page, so you can see which templates (product, article, listing) are missing it.
Greadme AI visibility analyzer — shows whether AI search engines can isolate the primary content of each page, which depends directly on a clean <main> boundary.
Browser developer tools accessibility tree — opens the live accessibility tree your assistive tech sees; verify exactly one node with role "main."
Screen reader landmarks list: press Insert+F7 in NVDA or VO+U in VoiceOver and confirm "main" appears once.
Open-source axe-core — runs the landmark-one-main rule against any page in CI; a one-line failure when zero or more than one <main> is present.

8 Best Practices for the <main> Landmark

1. Use Exactly One <main> Per Page

The HTML5 specification and the landmark-one-main rule both require it. If a page renders zero or two, screen-reader navigation breaks and automated audits fail.

2. Prefer Native <main> Over role="main"

Both work, but <main> is shorter, communicates intent in the markup, and is impossible to misspell. Reach for role="main" only when you cannot change the tag (legacy CMS templates).

3. Place <main> as a Top-Level Sibling

Keep <main> as a direct child of <body>, sitting beside <header>, <nav>, and <footer>. Nesting it inside any of those is invalid HTML.

4. Pair <main> With a Skip Link

Add <a href="#main-content">Skip to main content</a> as the first focusable element on the page and give <main> the matching id. Sighted keyboard users get the same shortcut screen-reader users already have.

5. Make <main> Programmatically Focusable When Used as a Skip Target

Add tabindex="-1" on <main> so that following a skip link reliably moves keyboard focus there. Without it, some browsers move only the scroll position.

<main id="main-content" tabindex="-1">
  <h1>Page title</h1>
  ...
</main>

6. Put Page-Specific H1 Inside <main>

The page's primary heading belongs to its primary content. This pairs the H1 with the mainlandmark in the accessibility tree, helping AI engines extract a clean "title + body" pair when they cite your page.

7. Keep Site-Wide Chrome Out of <main>

Logos, primary navigation, search forms shared across pages, language switchers, cookie banners, and the global footer go outside <main>. Including them defeats the purpose of having a primary-content landmark.

8. Audit SPA Route Transitions

Single-page apps that swap views via client routing sometimes leave a stale <main> in the DOM and append a new one — producing two simultaneous mains. After every route change, verify that exactly one <main> is present.

Common Issues With <main> — and Fixes

Problem: The Page Has No <main> At All

What's happening: the template wraps content in <div class="content"> instead of <main>. Screen-reader users have no shortcut to the article; the landmark-one-main rule fails.

Fix: change the wrapping <div> to <main id="main-content">. No CSS changes are required — <main> is a block element with the same default rendering as <div>.

Problem: Multiple <main> Elements On The Same Page

What's happening: a layout component renders one <main>, and a nested page component renders another. Both are visible in the DOM.

Fix: own the <main> at exactly one layer of the layout. If a child needs a primary-content wrapper, give it a different element (such as <article>) and keep <main> reserved for the outermost layout.

Problem: <main> Wrapping the Header, Nav, and Footer

What's happening: a developer wrapped the entire body in <main> to satisfy an audit warning, defeating the purpose. Screen-reader users now jump to <main> only to land on the site logo.

Fix: move <header>, <nav>, and <footer> outside <main>, leaving only the page-specific content inside.

Problem: Stale <main> After SPA Route Change

What's happening: the previous route's <main> is still in the DOM when the new route mounts its own. The page now has two.

Fix: ensure the layout component renders one persistent <main> across route changes, and that route content renders inside it as children — not as a sibling that brings its own <main>.

<main> vs Other HTML5 Landmarks

<main> is one of several landmark elements introduced in HTML5. Each plays a distinct role in the accessibility tree.

Element	Implicit ARIA Role	Per-Page Limit	Purpose
`<main>`	main	Exactly one	The page's unique primary content.
`<header>` (top-level)	banner	One per page (when at body level)	Site-wide branding, logo, primary nav container.
`<nav>`	navigation	Multiple allowed (label each)	Major navigation blocks (primary, footer, breadcrumbs).
`<aside>`	complementary	Multiple allowed	Sidebars, related content, callouts.
`<footer>` (top-level)	contentinfo	One per page (when at body level)	Site-wide footer: copyright, secondary links.
`<article>`	article	Multiple allowed	Self-contained content (a single post in a feed).

FAQ

Is the <main> element required by WCAG?

WCAG does not literally require the <main> tag, but it requires that users be able to programmatically determine page structure (SC 1.3.1) and bypass repeated blocks (SC 2.4.1). The <main> landmark is the cleanest way to satisfy both at Level A. The landmark-one-main automated rule fails any page that has zero or more than one.

Can I have more than one <main> on a page?

No. The HTML5 specification permits multiple <main> elements only when all but one have hidden applied. In practice, treat the rule as "exactly one visible <main> per page" — every accessibility audit, including landmark-one-main, treats two as a failure.

Should I use <main> or role="main"?

Prefer the native <main> element. It is shorter, easier to read, and harder to misspell than <div role="main">. The first rule of ARIA is "use a native element when one exists." Reach for role="main" only when the markup cannot be changed.

Do search forms or breadcrumbs go inside <main>?

A site-wide search form belongs in the header, outside <main>. A search results page's search field and results list are the page's primary content and belong inside <main>. Breadcrumbs are situational — many sites place them inside <main>as part of the page's context; either pattern is acceptable as long as it stays consistent.

Does <main> replace a skip link?

For screen-reader users who navigate by landmarks, yes — they can jump straight to <main>. But sighted keyboard users do not have landmark shortcuts, so a visible skip link pointing at #main-content still matters. The two work best together.

How do AI search engines like ChatGPT and Perplexity use <main>?

Generative engines parse the accessibility tree to separate primary content from chrome. A page with a clear <main> boundary lets them extract clean "article body" passages for citation; a page wrapped in nested <div>s forces them to guess where the content begins, often pulling in nav and footer text or skipping the page entirely.

What ID should I give my <main> element?

Any unique id works, but pick a stable convention — main-content and main are both common — and reuse it across the site so a single skip link template can target it everywhere. Add tabindex="-1" so following the skip link reliably moves keyboard focus.

Conclusion

The <main> landmark is one of the cheapest accessibility wins available: a single tag, no CSS changes, and it satisfies two Level A WCAG criteria while improving SEO and AI citation quality at the same time. The rule is simple — exactly one <main>per page, holding only the page's unique content, with the global header, nav, and footer as siblings outside it.

Run a Greadme deep scan to see every page that's missing <main> (or has more than one), and fix them in order of traffic.