<main>

Syntax

<main>
  <!-- primary page content -->
</main>

Examples

<header>...</header>
<nav>...</nav>
<main>
  <h1>Product Details</h1>
  <p>This is the main content unique to this page.</p>
</main>
<footer>...</footer>

<main>
  <section>
    <h2>About Us</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Our Services</h2>
    <p>...</p>
  </section>
</main>

<a href="#main-content">Skip to main content</a>
<nav>...</nav>
<main id="main-content">
  <h1>Page Title</h1>
</main>

Best practices

• Use exactly one <main> element per page, and never nest it inside <header>, <footer>, <nav>, <article>, or <aside>
• Give <main> an id so it can be used as a target for "skip to content" accessibility links
• Only include content in <main> that is unique to the current page — repeated site-wide elements belong outside it
• Screen reader users can jump straight to <main>, so make sure it truly contains the page's primary content

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard