HTML - <main>

The HTML <main> element represents the main content of  the <body> 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. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).

Example

 

HTML
<!-- 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 -->

Description  

The HTML <main> element represents the main content of  the <body> 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. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).

Note:
Content categories Flow content, palpable content.
Permitted content Flow content.
Tag omission None; both the starting and ending tags are mandatory.
Permitted parent elements Any element that accepts flow content other than <article>, <aside>, <footer>, <header>, or <nav> element.
DOM interface HTMLElement

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).

HTML
<main role="main">
  ...
</main>

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Chrome 26 21.0 (21.0) 12 Opera 16 Safari 7
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4 21.0 (21.0) No support No support 7.1

See Also  

 

Specifications  

Specification Status Comment
WHATWG 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.
HTML5.1
The definition of '<main>' in that specification.		 Working Draft No change from HTML5
HTML5
The definition of '<main>' in that specification.		 Recommendation Initial definition.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/main

Element HTML HTML grouping content Reference