<main> #

::: section-content The <main> HTML element represents the dominant content of the <body> of a document. 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. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <main> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

Gecko facts

<main>
  <p>
    Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.
  </p>

  <p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} header { font: bold calc(0.025 * (100vw)) Arial, sans-serif; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

A document mustn't have more than one <main> element that doesn't have the hidden attribute specified.

Content categories	Flow content, palpable content.
Permitted content	Flow content.
Tag omission	None; both the starting and ending tags are mandatory.
Permitted parents	Where flow content is expected, but only if it is a hierarchically correct `main` element.
Implicit ARIA role	`main`
Permitted ARIA roles	No `role` permitted
DOM interface	`HTMLElement`

:::

Attributes #

::: section-content This element only includes the global attributes. :::

Usage notes #

::: section-content The content of a <main> element should be unique to the document. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms shouldn't 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. :::

Examples #

::: section-content ::: code-example [html]{.language-name}

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

::: :::

Result #

::: section-content ::: {#sect1 .code-example} ::: iframe ::: ::: :::

Accessibility concerns #

Landmark #

::: section-content The <main> element behaves like a main landmark role. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. Prefer using the <main> element over declaring role="main", unless there are legacy browser support concerns. :::

Skip navigation #

::: section-content Skip navigation, also known as "skipnav", is a technique that allows an assistive technology user to quickly bypass large sections of repeated content (main navigation, info banners, etc.). This lets the user access the main content of the page faster.

Adding an id attribute to the <main> element lets it be a target of a skip navigation link.

::: code-example [html]{.language-name}

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

:::

WebAIM: "Skip Navigation" Links{target="_blank"} :::

Reader mode #

::: section-content Browser reader mode functionality looks for the presence of the <main> element, as well as heading and content sectioning elements when converting content into a specialized reader view.

Building websites for Safari Reader Mode and other reading apps.{target="_blank"} :::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-main-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

       Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

main 26 12 21 No 16 7 4.4 26 21 14 7 1.5 :::

<main> #

Try it #

HTML Demo: <main> #

Output #

Console Output #

Attributes #

Usage notes #

Examples #

Result #

Accessibility concerns #

Landmark #

Skip navigation #

Reader mode #

Specifications #

::: _table #

Specification #

Browser compatibility #

See also #