The <main> represents the main content of the <body> of a document, portion of a document, or application. The main content area consists of content that is directly related to, or expands upon the central topic of, a document or the central functionality of an application.

You can use multiple <main> elements within the same page when it makes sense to do so. For instance, if you have a page presenting multiple sections (each inside an <section> element, each of which has some extra material within (such as toolbars for editing, ads, and so forth), it may make sense to include a <main> element within each section to identify the primary contents of that specific section.

Content categories Flow content, palpable content.
Permitted content Flow content.
Tag omission None; both the starting and ending tags are mandatory.
Permitted parents Any element that accepts flow content (WHATWG). However, the W3C specification doesn't permit <main> to be used as a descendant of <article>, <aside>, <footer>, <header>, or <nav>.
Permitted ARIA roles The main role is applied to <main> by default, and the presentation role is permitted as well.
DOM interface HTMLElement


This element only includes the global attributes.

Usage notes

The content of a <main> element should be unique to the document or section the element contains. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms should not be included unless the search form is the main function of the page.

<main> doesn't contribute to the document's outline; that is, unlike elements such as <body>, headings such as <h2>, and such, <main> doesn't affect the DOM's concept of the structure of the page. It's strictly informative.

Differences between the WHATWG and W3C specifications

The <main> element's definition is substantially different between WHATWG's living standard—which is the specification MDN uses by convention—and the W3C specification. As compared to the description given above, here are the differences between the two specifications:

This seems like a short set of differences, but the <main> element is quite simple at a functional level, so the existence of these differences can have significant consequences if you don't keep them in mind.


<!-- other content -->

  <p>The apple is the pomaceous fruit of the apple tree.</p>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    <p>... </p>
    <p>... </p>

    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>

<!-- other content -->


Specification Status Comment
HTML Living Standard
The definition of '<main>' in that specification.
Living Standard Removed the restriction about using <main> multiple times in a document, or as a descendent of an <article> element.
HTML 5.1
The definition of '<main>' in that specification.
Recommendation No change from HTML5.
The definition of '<main>' in that specification.
Recommendation Initial definition.

Browser compatibility

The <main> element is widely supported. For Internet Explorer 11 and below, it is suggested that an ARIA role of "main" be added to the <main> element to ensure it is accessible (screen readers like JAWS, used in combination with older versions of Internet Explorer, will be able to understand the semantic meaning of the <main> element once this role attribute is included).

<main role="main">
Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 26 12 21 No 16 7
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support Yes Yes 12 21 Yes 7.1 ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.