<main>

Specifies the main content of a document

✨ HTML5

Definition and Usage

The <main> element specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

Accessibility Tip: The <main> element provides a landmark role that helps screen reader users navigate directly to the main content of the page.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <main> tag supports the Global Attributes in HTML.

The <main> tag also supports the Event Attributes in HTML.

Examples

Basic Main Element

A simple example using the <main> element:

Example

Unavailable or blocked: fragment context “#home”; fragment context “#about”; fragment context “#contact”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <h2>Welcome to Our Website</h2>
    <p>This is the main content of the page.</p>
  </main>

  <footer>
    <p>© 2025 My Website</p>
  </footer>
</body>

Main with Article and Section

Combine <main> with other semantic elements:

Example
<main>
  <article>
    <h2>Blog Post Title</h2>
    <p>Published on January 15, 2025</p>

    <section>
      <h3>Introduction</h3>
      <p>This is the introduction to the blog post...</p>
    </section>

    <section>
      <h3>Main Content</h3>
      <p>This is the main content of the blog post...</p>
    </section>
  </article>
</main>

Skip Navigation Links

Use <main> as a skip link target for accessibility:

Example
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <header>
    <nav>
      <!-- Navigation with many links -->
    </nav>
  </header>

  <main id="main-content">
    <h1>Main Content Starts Here</h1>
    <p>Users can jump directly to this content.</p>
  </main>
</body>

Main with Aside

Proper structure with main content and sidebar:

Example
<body>
  <header>
    <h1>My Blog</h1>
  </header>

  <div class="container">
    <main>
      <article>
        <h2>Latest Post</h2>
        <p>This is the main content...</p>
      </article>
    </main>

    <aside>
      <h3>Popular Posts</h3>
      <ul>
        <li><a href="#">Post 1</a></li>
        <li><a href="#">Post 2</a></li>
      </ul>
    </aside>
  </div>
</body>

Complete Page Structure

Full semantic HTML5 page structure:

Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML Page</title>
</head>
<body>
  <header>
    <h1>Website Title</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="home">
      <h2>Welcome</h2>
      <p>Welcome to our website!</p>
    </section>

    <section id="about">
      <h2>About Us</h2>
      <p>Learn more about our company.</p>
    </section>

    <section id="services">
      <h2>Our Services</h2>
      <p>We offer various services.</p>
    </section>
  </main>

  <footer>
    <p>© 2025 Company Name. All rights reserved.</p>
  </footer>
</body>
</html>

Main with Multiple Articles

Blog listing page structure:

Example
<main>
  <h1>Recent Blog Posts</h1>

  <article>
    <h2>Understanding HTML5 Semantic Elements</h2>
    <p>Learn about semantic HTML...</p>
    <a href="post1.html">Read more</a>
  </article>

  <article>
    <h2>CSS Grid Layout Guide</h2>
    <p>Master CSS Grid layout...</p>
    <a href="post2.html">Read more</a>
  </article>

  <article>
    <h2>JavaScript ES6 Features</h2>
    <p>Explore modern JavaScript...</p>
    <a href="post3.html">Read more</a>
  </article>
</main>

Semantic HTML Structure

The <main> element is part of HTML5's semantic structure that improves document organization:

<header>: Introductory content or navigation
<nav>: Navigation links
<main>: Main content (unique to the document)
<aside>: Sidebar content related to main content
<footer>: Footer information

Accessibility Benefits

The <main> element provides significant accessibility improvements:

Landmark Role: Automatically provides a role="main" landmark for assistive technologies
Screen Readers: Users can quickly navigate to the main content using keyboard shortcuts
Skip Navigation: Enables "skip to main content" functionality for keyboard users
Document Structure: Helps assistive technologies understand page organization
Better UX: Improves navigation for users with disabilities

WCAG Compliance: Using the <main> element helps meet Web Content Accessibility Guidelines (WCAG) 2.1 success criteria for page structure.

Main vs Article vs Section

Element	Purpose	Usage	Multiple Allowed?
<main>	Dominant content of the page	Main content unique to the document	No - Only one per page
<article>	Self-contained content	Blog posts, news articles, forum posts	Yes - Multiple allowed
<section>	Thematic grouping	Chapters, tabbed content, sections	Yes - Multiple allowed

Best Practices

One Per Page: Use only one <main> element per document
Direct Child of Body: The <main> element should typically be a direct child of <body>
Not Nested: Don't place <main> inside <article>, <aside>, <footer>, <header>, or <nav>
Unique Content: Only include content that is unique to the page (not repeated on other pages)
Skip Links: Use an id attribute to create skip navigation links
No Repeated Content: Don't include site-wide navigation, logos, search forms, or copyright information inside <main>
SEO Benefits: Search engines better understand your page structure and main content

Common Mistake: Don't use multiple <main> elements on the same page. If you need to group multiple pieces of content, use <article> or <section> inside a single <main> element.

Try it Yourself

Interactive Example

This page itself uses the <main> element! The content you're reading right now is inside the <main> tag, while the header, sidebar, and footer are outside of it.

Try in Code Playground

Default CSS Settings

Most browsers will display the <main> element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

main {
  display: block;
}

Related Tags

<article>
Defines independent content
<section>
Defines a section in document
<header>
Defines a header for document
<footer>
Defines a footer for document
<nav>
Defines navigation links
<div>
Defines a generic container