HTML The main Element

The <main> element identifies the primary, unique content of a document — the content that is directly related to the page’s central topic, excluding things that repeat across pages like headers, navigation, sidebars, and footers. It gives browsers, assistive technology, and search engines a single, reliable landmark for "this is what this page is actually about," which makes pages faster to navigate for everyone, especially people using screen readers.

Overview / How it works

Before <main> existed, developers marked the primary content area with a generic <div>, usually given an id like id="content" or id="main". That worked visually, but it carried no meaning in the DOM — a screen reader or search engine crawler had no reliable way to know that this particular <div> was the important one versus, say, a promotional sidebar <div>. HTML5 introduced <main> specifically to close that gap.

Semantically, <main> maps to the ARIA landmark role main. Browsers expose this in the accessibility tree automatically, without you needing to add role="main" yourself (adding it explicitly is redundant and unnecessary in modern browsers, though you may still see it in older codebases as a fallback for very old assistive technology). Screen reader users can jump directly to the <main> landmark with a keyboard shortcut, skipping past repeated navigation and header content — this is one of the biggest practical accessibility wins <main> provides.

Structurally, <main> is a sectioning root, but importantly it is not a sectioning content element like <article>, <section>, or <nav>. That means <main> does not contribute to the document outline the way those elements do — it exists purely to flag "the dominant content lives here," not to add another nesting level of sectioning semantics. By default, browsers render <main> as a block-level element with no special visual styling — visually it behaves like a plain <div> until you apply CSS. All visual layout (columns, spacing, backgrounds) belongs to CSS, not to the choice of element itself.

The critical uniqueness rule

A document must have at most one visible <main> element. You can technically have multiple <main> elements in the markup, but every one after the first must carry the hidden attribute (a pattern used in some JavaScript-driven single-page apps that swap visible panels). For a normal static page, treat this rule simply: exactly one <main>, and it must not be hidden.

Syntax

<main>
  <!-- the page's unique, primary content -->
</main>
Aspect Rule
Placement Direct child of <body>; must not be a descendant of <article>, <aside>, <footer>, <header>, or <nav>
Count per page Only one visible <main> per document
Content model Flow content — headings, paragraphs, sections, articles, forms, and so on
Implicit ARIA role main landmark (no need to add role="main" manually)
Attributes Only the global HTML attributes; no <main>-specific attributes exist

Examples

Example 1: A basic page skeleton

<body>
  <header>
    <h1>Daily Recipes</h1>
  </header>

  <nav>
    <a href="/">Home</a>
    <a href="/recipes">Recipes</a>
  </nav>

  <main>
    <h2>Today's Featured Recipe</h2>
    <p>A simple weeknight pasta with garlic and olive oil.</p>
  </main>

  <footer>
    <p>&copy; 2026 Daily Recipes</p>
  </footer>
</body>

Result: The page displays a heading and title bar, a navigation row with two links, a body section showing the recipe heading and description, and a copyright line at the bottom. Visually nothing looks different from using <div> elements, but a screen reader user now has a "main" landmark they can jump straight to, skipping the header and nav.

Example 2: main containing multiple sections

<main>
  <h2>Blog</h2>

  <article>
    <h3>Learning Semantic HTML</h3>
    <p>Why meaningful tags matter for accessibility.</p>
  </article>

  <article>
    <h3>CSS Grid Basics</h3>
    <p>An introduction to two-dimensional layouts.</p>
  </article>
</main>

Result: A heading labeled "Blog" appears, followed by two stacked article blocks, each with its own subheading and paragraph. The <main> wraps both articles because they are, together, the primary content of this page — a blog listing.

Example 3: A realistic page with a sidebar excluded from main

<body>
  <header>
    <h1>Tech News</h1>
  </header>

  <div>
    <main>
      <article>
        <h2>New Browser Release Ships Faster Rendering</h2>
        <p>Details about the update and what changed under the hood.</p>
      </article>
    </main>

    <aside>
      <h3>Trending Topics</h3>
      <ul>
        <li>Web Performance</li>
        <li>Accessibility</li>
      </ul>
    </aside>
  </div>

  <footer>
    <p>Contact us for tips</p>
  </footer>
</body>

Result: The browser renders a header title, then a two-part content area — the news article on one side and a "Trending Topics" list on the other (side by side or stacked depending on CSS) — followed by a footer. Only the article is wrapped in <main>, because the sidebar is supplementary, tangential content, not the page’s primary subject matter. Note the wrapping <div> here is purely a layout container for CSS and carries no semantic meaning itself.

How it works step by step

  • The HTML parser encounters <main> and creates a corresponding node in the DOM tree, as a child of whatever element contains it (normally <body>).
  • The browser’s accessibility engine walks the DOM and, upon finding a <main> node, exposes it in the accessibility tree with the implicit ARIA role main.
  • Screen readers and other assistive technology query this accessibility tree to build their list of page landmarks (banner, navigation, main, complementary, contentinfo, and so on), which users can jump between.
  • Because <main> carries no default visual styling beyond being a block-level box, the browser’s default rendering shows no visible difference from a <div> — any layout comes entirely from your own CSS.
  • If a page has more than one non-hidden <main>, browsers do not necessarily throw an error, but HTML validators will flag it, and assistive technology behavior becomes unreliable since the "main" landmark is no longer unique.

Common Mistakes

Mistake 1: Using more than one visible main

<main>
  <h2>Article</h2>
</main>
<main>
  <h2>Related Posts</h2>
</main>

This is invalid because a document may only have one visible <main> landmark. The second block should use a different element, such as <section> or <aside>, or simply be nested inside the same <main>.

<main>
  <h2>Article</h2>
  <section>
    <h2>Related Posts</h2>
  </section>
</main>

Mistake 2: Nesting main inside header, footer, nav, or article

<article>
  <main>
    <p>Some content</p>
  </main>
</article>

The HTML specification disallows <main> as a descendant of <article>, <aside>, <footer>, <header>, or <nav>, because <main> represents the page’s dominant content, not content scoped inside another sectioning element. Move <main> up so it wraps the article instead.

<main>
  <article>
    <p>Some content</p>
  </article>
</main>

Mistake 3: Using main for repeated boilerplate

<main>
  <nav>
    <a href="/">Home</a>
  </nav>
</main>

Navigation menus, site headers, copyright footers, and cookie banners repeat on every page, so they don’t belong to the "main" content — they should sit outside <main>, typically inside <nav>, <header>, or <footer> at the body level.

Best Practices

  • Use exactly one <main> per page, and place it as a direct child of <body> (or of a purely presentational wrapper <div> used only for layout).
  • Never nest <main> inside <article>, <aside>, <header>, <footer>, or <nav>.
  • Keep repeated, site-wide chrome — navigation bars, logos, footers — outside <main> so assistive technology can distinguish boilerplate from unique content.
  • Don’t add role="main" manually in modern markup; the element already provides that role implicitly.
  • Add an id to <main> (for example id="main-content") so it can serve as the target for a "skip to main content" link at the top of the page.
  • Remember that <main> controls meaning, not appearance — all spacing, columns, and colors are the job of CSS.

Practice Exercises

  • Build a simple page with a <header> containing a site title, a <nav> with three links, a <main> containing an <article> about a topic of your choice, and a <footer> with a copyright notice. Confirm you only used one <main>.
  • Take a page that currently uses <div id="main"> for its central content and rewrite it using <main> instead. Check that it isn’t nested inside any disallowed ancestor.
  • Add a "skip to content" link as the very first element inside <body> that points to an id set on your <main> element (for example, <a href="#main-content">Skip to content</a> paired with <main id="main-content">).

Summary

  • <main> marks a page’s unique, primary content — not headers, navigation, sidebars, or footers.
  • A document must have only one visible <main> element.
  • <main> cannot be nested inside <article>, <aside>, <header>, <footer>, or <nav>.
  • It carries an implicit ARIA role of main, giving assistive technology users a direct landmark to jump to.
  • It has no default visual styling beyond block-level display — all layout comes from CSS.
  • Using <main> correctly improves accessibility, and can help search engines identify the core content of a page.