W3cubDocs

/HTML

<main>

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`

Attributes

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:

While the WHATWG living standard for HTML allows multiple <main> elements in a page, the W3C version of the specification does not, unless all but one of them are hidden using the hidden attribute.
The WHATWG specification permits <main> to be used anywhere flow content is allowed. On the other hand, the W3C version of the HTML specification doesn't allow <main> to be a descendant of <article>, <aside>, <footer>, <header>, or <nav>.

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.

Example

<!-- other content -->

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

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

<!-- other content -->

Specifications

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.
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">
  ...
</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	?