References

Beginner-friendly references for web development, with live, editable examples.

The HTML <main> tag

Element All modern browsers Updated
Quick answer

The HTML <main> element wraps the dominant content of a page — what makes this page unique, excluding repeated headers, navigation, sidebars and footers. There should be one <main> per page, and it provides the main landmark for "skip to content".

Overview

The <main> element marks the dominant, page-specific content — the part that is unique to this page and not repeated across the site. Everything that recurs on every page — the <header>, primary <nav>, sidebars and <footer> — stays outside it.

Use exactly one visible <main> per page, and do not nest it inside an <article>, <aside>, <header>, <footer> or <nav>. It is a top-level region, not a child of those.

It is exposed as the main landmark, which is what a "Skip to content" link should target (<a href="#main">) — letting keyboard users bypass the repeated header and navigation in a single jump. That alone makes it worth adding to every page.

Syntax

<main>
  <h1>Page title</h1>
  <p>The unique content of this page.</p>
</main>

Example

Live example 
<main>
  <h1>About us</h1>
  <p>This unique page content lives in &lt;main&gt;.</p>
</main>

Best practices

  • Include exactly one visible <main> per page, holding only the content unique to that page.
  • Keep repeated regions — header, nav, sidebar, footer — outside <main>.
  • Point your "Skip to content" link at the main element so keyboard users can bypass the header.
  • Do not nest <main> inside an article, aside, header, footer or nav.

Accessibility

The main landmark is the destination for "skip to content" links and a key screen-reader navigation target. Give it an id so a skip link can point at it, and keep repeated page furniture outside it.

Frequently asked questions

What is the main element for?
It identifies the central, page-specific content — the part unique to this page, excluding anything repeated across the site.
Can I have more than one main element?
Only one may be visible at a time. You can have additional <main> elements only if all but one are hidden (for example with the hidden attribute).
What is a skip link?
A link near the top of the page (<a href="#main">) that jumps to the <main> element, letting keyboard users skip the repeated header and navigation.
What content goes outside main?
Anything that repeats across pages — the site <header>, primary <nav>, sidebars and <footer>.
link map