{{HTMLRef}}
The HTML <main>
element represents the main content of the {{HTMLElement("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).
<main>
must not be a descendent of an {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}} element.- Only one main element can be used per document.
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 {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}} element. |
DOM interface | {{domxref("HTMLElement")}} |
Attributes
This element only includes the global attributes.
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 |
---|---|---|
{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}} | {{Spec2('HTML WHATWG')}} | Removed the restriction about using <main> multiple times in a document, or as a descendent of an {{HTMLElement("article")}} element. |
{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}} | {{Spec2('HTML5.1')}} | No change from {{SpecName('HTML5 W3C')}} |
{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}} | {{Spec2('HTML5 W3C')}} | 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>
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | Chrome 26 | {{ CompatGeckoDesktop("21.0") }} | 12 | Opera 16 | Safari 7 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4.4 | {{ CompatGeckoMobile("21.0") }} | {{CompatNo()}} | {{CompatNo()}} | 7.1 |
See also
- Basic structural elements: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}
- Section-related elements: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}