Seoxpert.io
Get started
lowOn-Page SEO

Pages with Multiple `<main>` Landmarks

Pages should have only one visible <main> landmark; multiple <main> elements cause confusion for assistive technologies.

By Seoxpert Editorial · Published

Why it matters

Screen readers rely on a single <main> landmark to help users quickly access the primary content. Multiple <main> elements can mislead assistive technology, causing users to miss or struggle to find the actual main content. This can hurt accessibility and user experience, especially for those relying on keyboard navigation.

Impact

Leaving multiple <main> elements can confuse screen reader users and degrade accessibility compliance.

How it's detected

An automated crawler parses the HTML and flags pages containing more than one visible <main> element.

Common causes

  • •Framework or CMS layouts injecting a default <main> in addition to a page-level <main>
  • •Copy-pasting code snippets that include <main> wrappers
  • •Misunderstanding of HTML5 landmarks and their unique purpose
  • •Merging multiple templates or components, each with their own <main>

How to fix it

Identify the element that contains the unique, primary content and keep it as the sole <main> element. Change any additional <main> elements to <section> or <div> and, if needed, add a descriptive aria-label. Review your layout and page templates to ensure only one <main> is rendered per page, especially when using frameworks or CMSs.

Code examples

Incorrect: Multiple <main> elements

<main>
  <h1>Sidebar</h1>
  <!-- Sidebar content -->
</main>
<main>
  <h1>Main Content</h1>
  <!-- Primary page content -->
</main>

Correct: Only one <main>, sidebar as <section>

<section aria-label="Sidebar">
  <h1>Sidebar</h1>
  <!-- Sidebar content -->
</section>
<main>
  <h1>Main Content</h1>
  <!-- Primary page content -->
</main>

FAQ

Can I use more than one <main> element if my page has multiple content areas?

No, HTML5 allows only one visible <main> landmark per page. Use <section> or <div> for other areas.

What should I do if my framework injects a <main> by default?

Check your layout and page templates to ensure only one <main> is rendered. Remove or replace extras with <section> or <div>.

Does having multiple <main> elements affect SEO rankings?

While not a direct ranking factor, poor accessibility can impact user experience and may indirectly affect SEO.

How do screen readers behave with multiple <main> elements?

Screen readers typically jump to the first <main> element, which may not be the actual main content, confusing users.

Found this issue on your site?

Run a scan to see if Pages with Multiple `<main>` Landmarks affects your pages.

Scan my website →