Skip to content
html.sh

<main> - Main Content Element

The <main> Element

Section titled “The <main> Element”
Landmark HTML5

The <main> element represents the dominant content of the document’s body. It contains the central topic or main functionality of the page, excluding content that is repeated across multiple pages like navigation, headers, footers, and sidebars.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<main>
  <!-- Primary page content -->
</main>

Attributes

Section titled “Attributes”

Element-Specific Attributes

Section titled “Element-Specific Attributes”

The <main> element has no element-specific attributes.

Global Attributes

Section titled “Global Attributes”

This element supports all global attributes.

Common Use Cases

Section titled “Common Use Cases”

Blog Post Page

Section titled “Blog Post Page”

The main content of a blog post, excluding navigation and footer:

Result

E-commerce Product Page

Section titled “E-commerce Product Page”

The product details are the main content, while navigation and promotional banners are outside:

Result

Search Results Page

Section titled “Search Results Page”

Search results are the main content:

Result

Application Dashboard

Section titled “Application Dashboard”

The dashboard content is main, while the app navigation is outside:

Result

What Should Go in Main

Section titled “What Should Go in Main”

Include in Main:

Section titled “Include in Main:”
  • Primary article or blog post content
  • Search results
  • Product details
  • Dashboard content
  • Form content (for form-focused pages)
  • Unique page content

Exclude from Main:

Section titled “Exclude from Main:”
  • Site headers and logos
  • Global navigation menus
  • Sidebars with related links (unless they’re integral to the main content)
  • Site-wide footers
  • Copyright notices
  • Advertising banners
  • Search forms (unless the page is a search page)

Best Practices

Section titled “Best Practices”

One Visible Main Per Page

Section titled “One Visible Main Per Page”

Only one <main> element should be visible at a time:

<!-- Correct: Single main element -->
<body>
  <header>...</header>
  <main>
    <h1>Page Content</h1>
  </main>
  <footer>...</footer>
</body>


<!-- Also correct: Multiple main elements with hidden -->
<body>
  <main id="primary-content">
    <h1>Default Content</h1>
  </main>
  <main id="alternative-content" hidden>
    <h1>Alternative View</h1>
  </main>
</body>

Skip to Main Content

Section titled “Skip to Main Content”

Provide a skip link for keyboard users:

Result

Don’t Nest Main in Other Landmarks

Section titled “Don’t Nest Main in Other Landmarks”

The <main> element should not be nested inside <article>, <aside>, <footer>, <header>, or <nav>:

<!-- Wrong: main inside article -->
<article>
  <main>
    <h1>Content</h1>
  </main>
</article>


<!-- Correct: main contains article -->
<main>
  <article>
    <h1>Content</h1>
  </article>
</main>

Use with Other Semantic Elements

Section titled “Use with Other Semantic Elements”

Combine <main> with other semantic elements for best structure:

<body>
  <header>
    <h1>Site Name</h1>
    <nav><!-- Site navigation --></nav>
  </header>


  <main>
    <article>
      <header>
        <h2>Article Title</h2>
      </header>
      <section>
        <h3>Section 1</h3>
        <p>Content...</p>
      </section>
    </article>


    <aside>
      <!-- Related content that's part of the main content -->
    </aside>
  </main>


  <footer>
    <!-- Site footer -->
  </footer>
</body>

Accessibility

Section titled “Accessibility”

Landmark Role

Section titled “Landmark Role”

The <main> element has an implicit ARIA role of main, creating a landmark that assistive technologies can navigate to:

<!-- These are equivalent -->
<main>Content</main>
<div role="main">Content</div>

Screen Reader Benefits

Section titled “Screen Reader Benefits”

Screen reader users can jump directly to the main content using landmark navigation:

  • JAWS: ; key to cycle through landmarks
  • NVDA: D key to jump to landmarks
  • VoiceOver: Use rotor to navigate to landmarks

Labeling Main

Section titled “Labeling Main”

If you have multiple <main> elements (with hidden), label them:

<main id="primary" aria-label="Primary content">
  <h1>Default View</h1>
</main>


<main id="alternative" aria-label="Alternative content" hidden>
  <h1>Alternative View</h1>
</main>

Browser Support

Section titled “Browser Support”
BrowserVersion
Chrome26+
Firefox21+
Safari7+
EdgeAll versions
IE11+ (with polyfill for IE 9-10)
Section titled “Related Elements”

Common Mistakes

Section titled “Common Mistakes”

Multiple Visible Main Elements

Section titled “Multiple Visible Main Elements”
<!-- Wrong: Multiple visible main elements -->
<body>
  <main>
    <h1>Content 1</h1>
  </main>
  <main>
    <h1>Content 2</h1>
  </main>
</body>


<!-- Correct: Hide all but one -->
<body>
  <main>
    <h1>Visible Content</h1>
  </main>
  <main hidden>
    <h1>Hidden Alternative</h1>
  </main>
</body>

Using Main for Navigation

Section titled “Using Main for Navigation”
<!-- Wrong: Navigation in main -->
<main>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</main>


<!-- Correct: Navigation outside main -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
<main>
  <h1>Page Content</h1>
</main>

Specifications

Section titled “Specifications”