0%

<main> Main content

The page's unique, central content. One per page.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<main> wraps the central content of the page, the part that makes it different from every other page on the site. Repeated pieces like the site header, the navigation and the footer stay outside.

A page may have only one visible main, and it should not sit inside an article, aside, header, footer or nav. Because it is a landmark, keyboard and screen reader users can skip straight to it.

The rule of one visible main per document is spelled out in the main element definition (opens in a new tab). In the Header, Nav, Main, Footer lesson you place it between header and footer.

Syntax

<body>
  <main>
    <h1>Page topic</h1>
  </main>
</body>

When to use it

Every page with real content gets one main element, wrapped around the part that changes from page to page: the post on a blog page, the product details in a shop, the form on a sign-up page. Single-page apps keep a main element as well and swap what is inside it.

Main is no layout wrapper. A centered column around the header, content and footer is a job for a <div>, with main inside it next to the header and footer. A sidebar that relates only to this page can sit inside main as an <aside>. A site-wide sidebar goes outside.

Templates cause trouble when some pages have main and others do not. Keyboard users then get a skip link that works on one page and fails on the next, so add main to the shared template once. A document may contain more than one main only when every one except the visible one carries the hidden attribute. The landmarks lesson shows how users jump to it.

Live example

Edit the code and watch the preview.

<header><p>Site name</p></header>
<main>
  <h1>Today's lesson</h1>
  <p>The unique content of this page goes here.</p>
</main>
<footer><p>&copy; 2026</p></footer>

More examples

Skip link to the main content

The first link on the page jumps past the header straight to the main content. It is moved off screen until it receives keyboard focus, then appears at the top. Press Tab in the preview to reveal it.

<style>
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#ff0;padding:4px}
</style>
<a class="skip" href="#content">Skip to main content</a>
<header>
  <p>Sunny Bakery</p>
  <nav aria-label="Main"><a href="index.html">Home</a> <a href="menu.html">Menu</a></nav>
</header>
<main id="content">
  <h1>Fresh today</h1>
  <p>Rye bread and cinnamon rolls.</p>
</main>

Only one visible main

An app may prepare several views in advance. Each can be a main element, as long as all but the current one have the hidden attribute. Here only the inbox view is shown and exposed as the main landmark.

<main>
  <h1>Inbox</h1>
  <p>You have 3 new messages.</p>
</main>
<main hidden>
  <h1>Settings</h1>
  <p>Change your password and notifications.</p>
</main>

Tip: One main per page, and never inside another landmark.

Browser support

The main element is a slightly later addition to HTML5 and is supported in all modern browsers as the main landmark. Internet Explorer never supported it, which is why older code often adds role="main" as well; that duplicate role is not needed for current browsers. See the main element support table (opens in a new tab).

Accessibility

Browsers expose main as the main landmark. Add a skip link that targets its id and you meet WCAG 2.4.1 (Bypass Blocks). Skip links are described in detail in the W3C note Understanding Bypass Blocks (opens in a new tab).

Common mistakes

Wrong

<main>
  <header>Site logo</header>
  <nav>Menu</nav>
  <h1>Article</h1>
</main>

Right

<header>Site logo</header>
<nav>Menu</nav>
<main>
  <h1>Article</h1>
</main>

Keep repeated site-wide blocks outside main, so the landmark leads only to this page's own content.

Frequently asked questions

How many main elements can a page have?

One visible <main>, at most. Extra ones are allowed only if all but one carry the hidden attribute, a trick single-page apps use when they switch views. And <main> may not go inside <article>, <aside>, <header>, <footer> or <nav>.

What should not go inside the main element?

Anything repeated across pages: the site logo and header, primary navigation, site-wide search, the copyright footer and blocks like them. Keep <main> for the content unique to this page. A skip link or the main landmark then takes users straight past the repeated material. The Keyboard and Focus lesson shows how to build that skip link.

Practise it

Related sections elements

<header>Introductory content: the site logo and navigation, or the top of an article.<nav>Wraps the major navigation links.<footer>Closing content for a page or section, like copyright, contacts and related links.<article>Self-contained content that makes sense alone, such as a post, card or comment.<section>A themed group of content, normally with its own heading.<aside>Content related to the main content but set apart from it, such as a sidebar.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h3>A subsection heading inside an h2 section.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.