<main>

  • Revision slug: HTML/Element/main
  • Revision title: <main>
  • Revision id: 379587
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment use the standard CompatGeckoDesktop macro in the compatibility table

Revision Content

{{SeeCompatTable()}}

Summary

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, of course, the document's main function is as a search form).

Note: There must not be more than one <main> element in a document, and it must not be a descendent of an {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}} element.

  • Content categoriesFlow content, palpable content.
  • Permitted content Flow content, but may not be a descendent of an {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}} element.
  • Tag omission None; both the starting and ending tags are mandatory.
  • Permitted parent elements Any element that accepts flow content, but may not be a descendent of an {{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
HTML 5.1 Editor's Draft  

Browser compatibility

As a newly-proposed feature of HTML, the <main> element is not yet supported widely. You are strongly urged to add the "main" ARIA role to your <main> element:

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

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Chrome Canary 26.0.1396.1 {{ CompatGeckoDesktop("21.0") }} {{CompatNo()}} {{CompatNo()}} WebKit r140374
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} {{CompatNo()}}

See also

  • {{HTMLElement("html")}}
  • {{HTMLElement("head")}}
  • {{HTMLElement("body")}}
{{HTML:Element_Navigation}}

Revision Source

<p>{{SeeCompatTable()}}</p>
<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;main&gt;</code> element</strong> represents the main content of&nbsp; 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, of course, the document's main function is as a search form).</p>
<div class="note">
  <p><strong>Note:</strong> There <strong>must not</strong> be more than one <code>&lt;main&gt;</code> element in a document, and it <strong>must not</strong> be a descendent of an {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}} element.</p>
</div>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</li>
  <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, but may not be a descendent of an {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}} element.</li>
  <li><dfn>Tag omission</dfn> None; both the starting and ending tags are mandatory.</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>, but may not be a descendent of an {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}} element.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element only includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<h2 id="Example">Example</h2>
<pre class="brush: html">
&lt;!-- other content --&gt;

<span class="highlight">&lt;main&gt;</span>
  &lt;h1&gt;Apples&lt;/h1&gt;
  &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;
  
  &lt;article&gt;
    &lt;h2&gt;Red Delicious&lt;/h2&gt;
    &lt;p&gt;These bright red apples are the most common found in many
    supermarkets.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

  &lt;article&gt;
    &lt;h2&gt;Granny Smith&lt;/h2&gt;
    &lt;p&gt;These juicy, green apples make a great filling for
    apple pies.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

<span class="highlight">&lt;/main&gt;</span>

&lt;!-- other content --&gt;</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element" title="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element">HTML 5.1</a></td>
      <td>Editor's Draft</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>As a newly-proposed feature of HTML, the <code>&lt;main&gt;</code> element is not yet supported widely. You are strongly urged to add the "main" ARIA role to your <code>&lt;main&gt;</code> element:</p>
<pre class="brush: html">
&lt;main role="main"&gt;
  ...
&lt;/main&gt;
</pre>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td><a href="https://www.google.com/intl/en/chrome/browser/canary.html" title="https://www.google.com/intl/en/chrome/browser/canary.html">Chrome Canary</a> <span style="color: rgb(48, 57, 66); font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">26.0.1396.1</span></td>
        <td>{{ CompatGeckoDesktop("21.0") }}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td><strong><a href="http://builds.nightly.webkit.org/files/trunk/mac/WebKit-SVN-r140374.dmg">WebKit r140374</a></strong></td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{HTMLElement("html")}}</li>
  <li>{{HTMLElement("head")}}</li>
  <li>{{HTMLElement("body")}}</li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>
Revert to this revision