Widely availableSupported across all major browsers. Safe to use in production.
Sectioning Widely available

<main>

The <main> element represents the dominant content of a document. It is commonly used together with <header> and <footer>.

Sectioning

Overview

The <main> element represents the dominant content of a document. It is commonly used together with <header> and <footer>.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<main>
26
12
21
7
26
7
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<body>
  <header>Header</header>
  <main>
    <h1>Main Content</h1>
    <p>Page-specific content goes here.</p>
  </main>
  <footer>Footer</footer>
</body>

Live demo

Main page content

Main element in document. Maincontent.pe-j to 1 onlyusage.

PreviewFullscreen

Skip navigation and. combination

Main to id skipnavigation. linkdestination to settings.

PreviewFullscreen

layoutinside. main

sidebar withlayout in main usingstructureization.

PreviewFullscreen

Use cases

  • Using <main>

    The <main> element represents the dominant content of a document. It is commonly used together with <header> and <footer>.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Related links

Powered by web-features