Path // www.yourhtmlsource.com → Reference → <main>

<main>

by Ross Shannon

The <main> element represents the dominant content of the document's body. This is the primary content area that is unique to the page and excludes content that is repeated across pages such as navigation, headers, footers, and sidebars. There should be only one visible <main> element per page, and it must not be nested within <article>, <aside>, <footer>, <header>, or <nav> elements.

Clock This page was last updated on 2025-11-17


Syntax

<main>
  <h1>Page Title</h1>
  <p>Primary page content...</p>
</main>

The element requires both opening and closing tags. It serves as a landmark region for accessibility, allowing screen reader users to jump directly to the main content. The element should contain the central topic or functionality of the page.

Attributes

  • Global attributes - The <main> element supports all global attributes such as id, class, style, lang, and dir.
  • hidden - If you have multiple <main> elements (for single-page applications), all but one must have the hidden attribute.

The <main> element has no element-specific attributes beyond the global ones. Its semantic meaning is defined purely by the element itself.

Examples

Basic Page Structure

<body>
  <header>
    <nav>...</nav>
  </header>
  
  <main>
    <h1>Welcome to Our Website</h1>
    <article>
      <h2>Latest News</h2>
      <p>Content here...</p>
    </article>
  </main>
  
  <footer>...</footer>
</body>

Blog Page

<main>
  <h1>Blog</h1>
  <article>
    <h2>First Post Title</h2>
    <p>Post content...</p>
  </article>
  <article>
    <h2>Second Post Title</h2>
    <p>Post content...</p>
  </article>
</main>

With Skip Link for Accessibility

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <header>...</header>
  <main id="main-content">
    <h1>Page Content</h1>
    <p>...</p>
  </main>
</body>

When to Use

Use the <main> element when:

  • Wrapping the primary content that is unique to the page
  • Separating main content from navigation, headers, and footers
  • Providing a landmark for screen reader users
  • Improving document structure for accessibility tools
  • Helping search engines identify the primary content

Important rules for <main>:

  • Only one visible <main> element per document
  • Must NOT be a descendant of <article>, <aside>, <footer>, <header>, or <nav>
  • Should NOT include content that repeats across pages
  • Can contain multiple <article>, <section>, or <aside> elements
  • <article> - Self-contained content within main
  • <section> - Thematic grouping of content
  • <header> - Introductory content or navigation
  • <footer> - Footer information
  • <nav> - Navigation sections
  • <aside> - Tangentially related content