HTML / Element

The `main` element marks the page's central content

A page has parts that appear on many pages, such as a logo and menu, and content that belongs to this page. The main element groups the content that is central to this page or app.

The short answer

Put the content that matters most to this page inside main. Keep a site-wide header and navigation outside it in most cases.

As a starting point, use one main that is shown on the page.

A small example

<body>
  <header>Site logo</header>
  <nav aria-label="Site menu">
    <a href="/about/">About this site</a>
  </nav>

  <main id="main-content">
    <h1>Page title</h1>
    <p>The content this page is about.</p>
  </main>

  <footer>Site-wide information</footer>
</body>

The logo, menu, and shared information stay outside main. An id lets a “Skip to main content” link point to the page content.

What belongs inside?

For a news page, it may be the article. For a product page, it may be the product details and buying options. A page can have headings, text, images, and forms inside main; it is not limited to one child element.

The main element gives content meaning. It does not automatically add a special visual design. Use CSS when you want to change its spacing, color, or layout.

How it differs from other elements

Element	What it is for
`header`	Introductory information for a page or section
`nav`	A group of important navigation links
`main`	The content central to this page
`footer`	Closing or shared information for a page or section

Putting a site-wide logo and menu inside every page's main blurs the difference between shared navigation and page-specific content.

Where to put it and how many to use

For a first page, place one main inside body. If the page embeds another document in an iframe, that document can have its own main.

The HTML standard does not allow more than one main without the hidden attribute in one document. Hiding an element with CSS alone does not meet that rule. In ordinary pages, one displayed main is enough.

Common mistakes

Putting a site-wide logo or navigation inside main
Expecting main to supply the page title without a heading
Using main only to change how something looks

main does not replace a heading. Use headings to name the page and organize its sections.

Check the details in Atlas

For the exact placement rules, how the hidden attribute affects the one-main rule, the main landmark, and browser and WPT observations, see the Yugien Atlas page about the main element. For a standalone post inside the primary content, see the article element guide. You can also read the iframe guide about embedding another document.

The main element marks the page's central content