Français

<main>

Tell the browser "this is where it happens"

— 1 min read

  • HTML
  • accessibility
  • semantics
  • structure

<main> — The main content

The <main> element wraps the primary content of your page — the part that is unique and does not repeat across pages. There must be only one visible <main> per page.

When to use it

You want to frame the central content of your page, excluding the header, footer, navigation, and repeated sidebars. On a blog, that is the article. On a contact page, that is the form.

What you gain

Accessibility: screen readers offer a shortcut to jump straight to <main>. Without it, users must wade through the entire navigation on every page.

Code example

<body>
  <header><!-- site header --></header>
  <nav><!-- primary navigation --></nav>
  <main>
    <h1>How to structure a page</h1>
    <p>The main content lives here.</p>
  </main>
  <footer><!-- site footer --></footer>
</body>

Further reading