HTML <main> Tag

The <main> tag is a block-level element introduced in the HTML5 specification. It wraps the dominant content of the document's <body> — the content that is unique to that document and not repeated across the pages of the site, such as the site header, navigation menu, sidebar, search box, or footer.

This page covers what <main> is for, how it fits into a complete document structure alongside <header>, <nav> and <footer>, how it powers "skip to content" links, and the rules around using more than one <main> on a page.

Where `<main>` can and can't go

The <main> element must not be placed inside an <article>, <aside>, <footer>, <header> or <nav> element — <main> is a top-level region, so those wrappers don't apply to it.

This element is part of the DOM tree but is excluded from the document outline, unlike heading elements such as <h1> to <h6>, which contribute to it.

Accessibility and the `main` landmark

<main> represents the main ARIA landmark. Assistive technologies such as screen readers expose landmarks so users can jump straight to the major regions of a page. Prefer the <main> element over adding role="main" to a generic element such as a <div>, because <main> carries that role implicitly.

There should be exactly one main landmark per page. Keyboard and screen-reader users can also skip past repeated content (navigation, banners, ads) using the "skip navigation" technique. If you give the <main> element an id, that id becomes the target of a skip link — see the example below.

Syntax

The <main> tag comes in pairs. The content is written between the opening (<main>) and closing (</main>) tags.

Example of the HTML `<main>` tag:

HTML <main> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>
        Languages HTML and CSS are intended for site layout.
      </p>
      <article>
        <h2>HTML</h2>
        <p>
          HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
        </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>
          CSS is a language of styles, defining the display of HTML documents.
        </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>

Try it Yourself »

`<main>` in a full document structure

In a real page, <main> sits alongside the other landmark elements. The header, navigation, and footer are repeated across pages, so they stay outside <main>; only the page-specific content goes inside it.

<!DOCTYPE html>
<html>
  <head>
    <title>Programming languages</title>
  </head>
  <body>
    <header>
      <h1>My Web Tutorials</h1>
    </header>

    <nav>
      <a href="/html">HTML</a> |
      <a href="/css">CSS</a> |
      <a href="/js">JavaScript</a>
    </nav>

    <main>
      <h2>Programming languages</h2>
      <p>HTML and CSS are intended for site layout.</p>
    </main>

    <footer>
      <p>&copy; 2026 My Web Tutorials</p>
    </footer>
  </body>
</html>

Result

A skip link lets keyboard and screen-reader users jump straight past the repeated navigation. Match the link's href to the id on the <main> element:

<body>
  <a href="#main-content">Skip to main content</a>

  <header>
    <h1>My Web Tutorials</h1>
  </header>
  <nav>
    <a href="/html">HTML</a> |
    <a href="/css">CSS</a>
  </nav>

  <main id="main-content">
    <h2>Programming languages</h2>
    <p>HTML and CSS are intended for site layout.</p>
  </main>
</body>

Activating the link moves focus to #main-content, so the user lands directly on the page's primary content.

Using more than one `<main>` with the `hidden` attribute

A page may contain only one visible <main> element. Any additional <main> elements must carry the hidden attribute. This is useful in single-page applications (SPAs), where several "views" exist in the DOM at once but only the active view is shown:

<main>
  <h2>Home view</h2>
  <p>This view is visible.</p>
</main>

<main hidden>
  <h2>Settings view</h2>
  <p>This view is in the DOM but hidden until activated.</p>
</main>

When the user switches views, the script swaps the hidden attribute so that exactly one <main> is visible at any time.

Attributes

The <main> tag supports the Global Attributes and the Event Attributes.

Styling the `<main>` element

<main> is just a structural container, so style it like any block element. Because it holds the page's primary content, it's a natural place to set the overall reading width, padding, and spacing:

main {
  display: block;       /* ensures block layout in older browsers */
  max-width: 800px;
  margin: 0 auto;       /* center the content column */
  padding: 20px;
  background-color: #f9f9f9;
}

Practice

What is the significance and usage of the main element in HTML? (Select all that apply.)

It wraps the dominant, page-specific content of the document.It helps browsers and assistive devices understand the structure of the page via the main landmark.It modifies the visual style of the main content on a webpage.Only one visible main element is allowed; extra ones must use the hidden attribute.It can be nested inside header, nav, or footer elements.

Where <main> can and can't go

Accessibility and the main landmark

Syntax

Example of the HTML <main> tag:

<main> in a full document structure

Adding a "skip to main content" link

Using more than one <main> with the hidden attribute