Imagine walking into a large department store where you need to find one specific item. Without clear signage directing you to different departments, you'd waste time wandering through areas that don't contain what you're looking for. The main landmark works similarly on websites—it's like a clearly marked sign that says "Primary Content This Way," helping users bypass navigation menus, sidebars, and other peripheral content to get straight to what they came for.
The main landmark is an HTML element (the <main> tag) or ARIA role (role="main") that identifies the primary content area of a webpage. This landmark helps screen reader users and other assistive technologies quickly jump to the most important content without having to navigate through all the surrounding elements.
The main landmark serves several important functions that significantly improve website usability:
Without a main landmark, users must navigate through every element on the page sequentially, which can be time-consuming and frustrating, especially on pages with complex headers, navigation menus, or multiple sidebars.
Every page without a proper main landmark forces assistive technology users to pay a "navigation tax"—the time and effort required to manually work through all the preliminary content to reach what they actually came to read or interact with. This tax accumulates across every page visit, creating significant friction in the user experience.
Proper main landmark implementation follows specific patterns that ensure maximum benefit for users:
The HTML5 <main> element is the standard way to mark your primary content area.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<header>
<nav>
<!-- Site navigation -->
</nav>
</header>
<main>
<h1>Page Heading</h1>
<p>This is the primary content of the page...</p>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<section>
<h2>Section Title</h2>
<p>Section content...</p>
</section>
</main>
<aside>
<!-- Sidebar content -->
</aside>
<footer>
<!-- Footer content -->
</footer>
</body>
</html>If you can't use the HTML5 main element, you can add role="main" to any container element.
<!-- When you need to use a div instead of main element -->
<div role="main">
<h1>Page Heading</h1>
<p>Primary content goes here...</p>
</div>
<!-- Common in legacy systems or when working with existing HTML -->
<div id="content" role="main">
<article>
<h1>Article Title</h1>
<p>Article content...</p>
</article>
</div>Note: Don't use both the main element and role="main" together—the HTML5 element automatically has the main role.
The main landmark works perfectly with skip navigation links, providing keyboard users a way to bypass repetitive content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
border-radius: 0 0 4px 4px;
}
.skip-link:focus {
top: 0;
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<nav>
<!-- Complex navigation menu -->
</nav>
</header>
<main id="main-content">
<h1>Welcome to Our Site</h1>
<p>This is the main content...</p>
</main>
</body>
</html>In SPAs, manage focus properly when content changes to maintain the main landmark's effectiveness.
// React example
function App() {
const mainRef = useRef(null);
// Focus main content when route changes
useEffect(() => {
if (mainRef.current) {
mainRef.current.focus();
}
}, [location.pathname]);
return (
<div>
<nav>
{/* Navigation */}
</nav>
<main ref={mainRef} tabIndex="-1">
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</main>
</div>
);
}
// Vue.js example
export default {
mounted() {
this.$refs.mainContent.focus();
},
template: `
<div>
<nav>
<!-- Navigation -->
</nav>
<main ref="mainContent" tabindex="-1">
<router-view />
</main>
</div>
`
}Understanding what content belongs in the main landmark is crucial for proper implementation:
<!-- Good example of main landmark content -->
<header>
<h1>Site Name</h1>
<nav>Site Navigation</nav>
</header>
<main>
<h1>How to Grow Tomatoes</h1> <!-- Page-specific heading -->
<article>
<h2>Choosing the Right Variety</h2>
<p>When selecting tomato varieties...</p>
<h2>Soil Preparation</h2>
<p>Tomatoes thrive in well-drained soil...</p>
</article>
<section>
<h2>Related Tools</h2>
<p>These gardening tools will help...</p>
</section>
</main>
<aside>
<h2>Popular Articles</h2>
<!-- Related content sidebar -->
</aside>
<footer>
<p>© 2025 Gardening Site</p>
</footer>Several common implementation mistakes can undermine the effectiveness of the main landmark:
What's happening: Having more than one main landmark on a single page, which confuses assistive technologies and users.
Simple solution: Use only one main landmark per page. If you have multiple content areas, consider using section or article elements instead:
<!-- Bad: Multiple main landmarks -->
<main>
<h1>News</h1>
<p>Latest news content...</p>
</main>
<main>
<h1>Sports</h1>
<p>Sports content...</p>
</main>
<!-- Good: One main landmark with multiple sections -->
<main>
<section>
<h1>News</h1>
<p>Latest news content...</p>
</section>
<section>
<h1>Sports</h1>
<p>Sports content...</p>
</section>
</main>What's happening: Including navigation menus, site headers, or other non-primary content within the main landmark.
Simple solution: Keep navigation and site-wide content outside the main landmark:
<!-- Bad: Navigation inside main -->
<main>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<h1>Page Content</h1>
<p>Content here...</p>
</main>
<!-- Good: Navigation outside main -->
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<main>
<h1>Page Content</h1>
<p>Content here...</p>
</main>What's happening: The main landmark either contains too much peripheral content or excludes important primary content.
Simple solution: Include all primary content but exclude peripheral elements:
<!-- Too broad: includes sidebar -->
<main>
<article>
<h1>Article Title</h1>
<p>Article content...</p>
</article>
<aside>
<h2>Related Links</h2>
<!-- Sidebar should be outside main -->
</aside>
</main>
<!-- Too narrow: excludes important content -->
<article>
<h1>Article Title</h1>
<p>Introduction...</p>
</article>
<main>
<p>Only this paragraph is in main</p>
</main>
<!-- Just right: includes all primary content -->
<main>
<article>
<h1>Article Title</h1>
<p>Introduction...</p>
<p>Main content...</p>
</article>
<section>
<h2>Comments</h2>
<!-- Comments are part of primary content -->
</section>
</main>
<aside>
<h2>Related Links</h2>
<!-- Sidebar outside main -->
</aside>What's happening: No main landmark present on pages, forcing users to navigate through all content sequentially.
Simple solution: Add a main element around your primary content area:
<!-- Before: No clear main content identification -->
<div class="wrapper">
<div class="header">Header content</div>
<div class="nav">Navigation</div>
<div class="content">
<h1>Page Title</h1>
<p>Page content...</p>
</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
<!-- After: Clear main landmark -->
<div class="wrapper">
<header class="header">Header content</header>
<nav class="nav">Navigation</nav>
<main class="content">
<h1>Page Title</h1>
<p>Page content...</p>
</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>Different types of pages require thoughtful consideration of what constitutes the main content:
<main>
<article>
<header>
<h1>Article Title</h1>
<p>Published on <time datetime="2025-05-21">May 21, 2025</time></p>
</header>
<div class="article-content">
<p>Article content...</p>
</div>
</article>
<section>
<h2>Comments</h2>
<!-- Comments section -->
</section>
</main><main>
<div class="product-details">
<h1>Product Name</h1>
<img src="product.jpg" alt="Product image">
<p class="price">$29.99</p>
<p class="description">Product description...</p>
<form>
<button type="submit">Add to Cart</button>
</form>
</div>
<section>
<h2>Customer Reviews</h2>
<!-- Reviews section -->
</section>
</main><main>
<h1>Search Results for "web accessibility"</h1>
<p>Found 47 results</p>
<section class="results">
<article class="result">
<h2><a href="/result1">First Result</a></h2>
<p>Result description...</p>
</article>
<article class="result">
<h2><a href="/result2">Second Result</a></h2>
<p>Result description...</p>
</article>
</section>
<nav aria-label="Search results pagination">
<!-- Pagination controls -->
</nav>
</main><main>
<h1>Contact Us</h1>
<p>We'd love to hear from you. Send us a message!</p>
<form>
<div>
<label for="name">Name</label>
<input type="text" id="name" required>
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" required>
</div>
<div>
<label for="message">Message</label>
<textarea id="message" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</main>Regular testing ensures your main landmark works effectively for users:
The most important test is whether users can quickly and consistently find your main content using assistive technology navigation features.
Implementing main landmarks correctly delivers several business advantages:
These benefits combine to create websites that serve all users more effectively while supporting business goals and reducing operational costs related to user support and accessibility remediation.
Different types of websites can benefit from tailored approaches to main landmark implementation:
In each case, the key is understanding what users primarily come to accomplish on your site and ensuring that content is clearly marked and easily accessible.
The main landmark represents one of the simplest yet most impactful accessibility improvements you can make to your website. It's a small implementation detail that makes a dramatic difference in how efficiently users can access your content, particularly those who rely on assistive technologies for navigation.
What makes the main landmark particularly valuable is its universal benefit. While it's essential for screen reader users who can jump directly to main content, it also provides semantic clarity that benefits search engines, voice navigators, and even developers who need to understand page structure.
The principle behind the main landmark—clearly identifying what matters most on each page—reflects good user experience design more broadly. When you think carefully about what constitutes your primary content, you naturally create better-organized, more user-focused websites.
As web experiences become more complex and information-rich, the simple act of clearly marking your main content becomes even more valuable. It's a signal to both users and technology that says, "This is what you came here for," cutting through the noise to deliver value efficiently.
Greadme's easy-to-use tools can help you identify missing or incorrectly implemented main landmarks on your website and provide simple instructions to fix them—even if you're not technically minded.
Check Your Website's Main Landmarks Today