HTML <main> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <main> element represents the dominant content of the <body> of a document. It is intended to encapsulate the core content that is directly related to or expands upon the central topic of the page. Content within <main> should be unique to the document and not repeated across multiple pages, which distinguishes it from elements like <header>, <footer>, or <nav> that typically contain site-wide or repeated content.

Structurally, <main> helps improve the semantic organization of HTML documents, making it clearer to both developers and assistive technologies which section of the page contains the primary content. Screen readers, for example, can quickly jump to the <main> content, enhancing accessibility and navigation for users who rely on such tools.

Key points about <main> include:

It is a block-level element and can contain flow content, such as headings, paragraphs, sections, articles, and images.
There should only be one <main> element per document, and it should not be a descendant of <article>, <aside>, <footer>, <header>, or <nav>.
It helps define the main topic or purpose of the document, making it easier for search engines and assistive technologies to understand the page’s structure and focus.
Using <main> improves semantic HTML and encourages cleaner, more meaningful page layouts.

Example of usage:

<body>
  <header>
    <h1>Website Header</h1>
    <nav>Navigation Links</nav>
  </header>

  <main>
    <h2>Welcome to Our Blog</h2>
    <p>This is the main content area where the primary information resides.</p>
    <article>
      <h3>Article Title</h3>
      <p>Details of the article go here.</p>
    </article>
  </main>

  <footer>
    <p>© 2025 Example Company</p>
  </footer>
</body>

In this example, <main> clearly separates the core content of the page from the header, navigation, and footer, providing a semantic structure that enhances both usability and accessibility.

Properties

Permitted Parents: Where flow content is expected, but only if it is a hierarchically correct main element.
Content: Flow content
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<body>

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



  <!-- navigation and header content -->



  <main id="main-content">

    <!-- main page content -->

  </main>

</body>

Attributes

None

Global Attributes

The <main> tag also supports the Global Attributes in HTML5

Event Attributes

The <main> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <main> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.