<main>

<main> identifies the document’s dominant content. Its native main landmark lets assistive technology navigate directly to that area. It does not guarantee a search-ranking boost.

Skip repeated navigation

Activate “Skip to main content” with a keyboard. The link’s fragment points to the main element’s ID. tabindex="-1" lets the target receive focus without adding a normal tab stop.

<a href="#content">Skip to main content</a>
<header>
  <p>Garden notes</p>
  <nav aria-label="Page"><a href="#tips">Tips</a></nav>
</header>
<main id="content" tabindex="-1">
  <h1>Growing herbs</h1>
  <section id="tips">
    <h2>Start small</h2>
    <p>Choose one herb you already use in cooking.</p>
  </section>
</main>
<footer><p>Example page</p></footer>

a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

Placement

A document must have no more than one <main> without hidden. Do not nest it inside <article>, <aside>, <footer>, <header>, or <nav>, or inside another <main>. It accepts flow content and may contain several articles or sections.

Keep repeated site navigation outside main. A search form belongs inside main when search itself is the page’s primary function. Do not add redundant role="main" to ordinary modern markup.

Inspect the landmarks

The example has a banner, navigation, main, and content-information region. The main element does not introduce a heading; headings still need sensible ranks. Use div for a generic inner layout wrapper.

Sources and browser support

MDN: main describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.