main
The primary content of the document. There should be only one main landmark per page, containing the unique content of that specific page. This is the most important landmark role for accessibility.
Purpose
Identifies the primary content unique to this page, excluding repeated content like headers and navigation
HTML Equivalent
Automatically applied to <main> elements
Screen Reader
Announced as "main" landmark, allowing users to jump directly to content
💡When to Use
Primary Page Content
The unique content of each page - articles, forms, search results, etc.
Always Required
Every page should have exactly one main landmark marking the primary content
Content Applications
Wrap the main content area in blogs, documentation, dashboards, and all web pages
💻Code Examples
Basic Main Role
Using the main role to identify primary content
<!-- Using semantic HTML (Preferred) -->
<main>
<h1>Page Title</h1>
<article>
<h2>Article Heading</h2>
<p>Main content goes here...</p>
</article>
</main>
<!-- Using role="main" explicitly -->
<div role="main">
<h1>Page Title</h1>
<p>Primary content of the page...</p>
</div>Complete Page Structure
Full page layout with proper landmark hierarchy
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<!-- Site Header -->
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<!-- Main Content -->
<main>
<h1>Welcome to Our Site</h1>
<article>
<h2>Main Article</h2>
<p>This is the primary content of the page...</p>
</article>
<section>
<h2>Additional Content</h2>
<p>More important content...</p>
</section>
</main>
<!-- Sidebar -->
<aside aria-label="Related content">
<h2>Related Articles</h2>
<ul>
<li><a href="/article1">Article 1</a></li>
<li><a href="/article2">Article 2</a></li>
</ul>
</aside>
<!-- Site Footer -->
<footer>
<p>© 2025 Company Name</p>
</footer>
</body>
</html>Skip to Main Content Link
Implementing skip navigation for keyboard accessibility
<!DOCTYPE html>
<html lang="en">
<body>
<!-- Skip Link (first focusable element) -->
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<header>
<nav aria-label="Main navigation">
<!-- Navigation links -->
</nav>
</header>
<!-- Main content with id for skip link -->
<main id="main-content" tabindex="-1">
<h1>Page Heading</h1>
<p>Main content starts here...</p>
</main>
<footer>
<!-- Footer content -->
</footer>
</body>
</html>
<!-- CSS for skip link -->
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>React Component Example
Implementing main role in a React application
import { useEffect, useRef } from 'react'
import { useRouter } from 'next/router'
export default function Layout({ children }) {
const mainRef = useRef<HTMLElement>(null)
const router = useRouter()
// Focus main content on route change
useEffect(() => {
if (mainRef.current) {
mainRef.current.focus()
}
}, [router.asPath])
return (
<div className="app">
{/* Skip to main content link */}
<a href="#main-content" className="skip-link">
Skip to main content
</a>
{/* Header */}
<header>
<nav aria-label="Main navigation">
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</nav>
</header>
{/* Main Content */}
<main
id="main-content"
ref={mainRef}
tabIndex={-1}
className="main-content"
>
{children}
</main>
{/* Footer */}
<footer>
<p>© 2025 Company Name</p>
</footer>
</div>
)
}⭐Best Practices
Use Semantic HTML
Always use the <main> element. It automatically has the main role and is the standard way to mark primary content.
Only One per Page
There must be exactly one main landmark per page. Never use multiple main elements or role="main".
Add Skip Link
Include a "skip to main content" link as the first focusable element for keyboard users to bypass navigation.
Place After Navigation
The main content should come after the banner (header) in the DOM but before the contentinfo (footer).
Focus on Route Change
In SPAs, programmatically focus the main element when the route changes to announce new content.
Use tabindex="-1"
Add tabindex="-1" to the main element so it can receive programmatic focus without being in the tab order.
⚠️Common Mistakes to Avoid
Multiple Main Landmarks
Adding role="main" to multiple elements on the same page
<main>First main content</main>
<div role="main">Second main</div> ❌Only have one main landmark per page
<main>
<section>First section</section>
<section>Second section</section>
</main> ✓Main Inside Other Landmarks
Nesting main inside banner, complementary, or contentinfo
<header>
<main>Content</main>
</header> ❌Main should be a top-level landmark
<header>
<nav>Navigation</nav>
</header>
<main>Content</main> ✓No Main Content
Forgetting to wrap the primary content in a main element
<header>Header</header>
<div class="content">
<h1>Title</h1>
<p>Content...</p>
</div>
<footer>Footer</footer> ❌Always mark the primary content with main
<header>Header</header>
<main>
<h1>Title</h1>
<p>Content...</p>
</main>
<footer>Footer</footer> ✓🔗Related ARIA Attributes
aria-label
Generally not needed for main, but can clarify purpose if necessary
<main aria-label="Primary content">aria-labelledby
Reference the page heading to label the main content
<main aria-labelledby="page-title">♿Accessibility Support
Screen Readers
The main landmark is the most important landmark for screen reader users. They can jump directly to it using "Q" (JAWS), "D" (NVDA), or landmarks list, bypassing repeated navigation content.
Keyboard Navigation
Include a "Skip to main content" link as the first focusable element. This allows keyboard users to bypass repeated navigation menus efficiently.
Browser Support
Universally supported across all modern browsers and assistive technologies. The <main> element provides automatic main role mapping and is HTML5 standard.