Definition and Usage

The <main> tag represents the main content area of a document.

This tag semantically indicates an area containing dominant content, such as the core topic of a document or the main function of an application.

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Web Page Title</title>
    </head>
    <body>
        <header>
            <!-- Web page header content -->
        </header>
        <nav>
            <!-- Navigation menu -->
        </nav>
        <main>
            <!-- Main content area of the web page -->
            <h1>Main Heading</h1>
            <p>Main content...</p>
            <!-- Additional content -->
        </main>
        <footer>
            <!-- Web page footer content -->
        </footer>
    </body>
</html>

The content inside the <main> tag should be unique to the document. It should not include elements that are repeated across documents or sections, such as sidebars, navigation links, copyright notices, site logos, or search forms—unless the search form is a primary feature of the page.

Important Note

A document must not contain more than one <main> tag that does not have the hidden attribute.

According to the specification, the <main> tag should appear only once per document. This rule is essential for maintaining a clear document structure and ensuring that web pages are interpreted correctly.

If you are building a single-page application (SPA) in JavaScript that renders content dynamically without server round trips, and you choose to predefine multiple <main> tags, you must hide the inactive ones using the hidden attribute.

Refer to the following example.

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Single Page Application</title>
        <link rel="stylesheet" href="spa.css">
        <script src="spa.js" async></script>
    </head>
    <body>
        <nav>
            <!-- Clicking the links
            will dynamically load the corresponding <main> content using 
            JavaScript without server round trips -->
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
        <main>
            <h1>Home</h1>
            …
        </main>
        <main hidden>
            <h1>About</h1>
            …
        </main>
        <main hidden>
            <h1>Contact</h1>
            …
        </main>
    </body>
</html>

Correct Syntax Structure

The <main> tag represents an area containing dominant content, so it must be correctly positioned within the HTML document to clearly expose that main content.

If the <main> tag is not properly placed, it can cause problems in understanding the document’s overall semantic structure. For this reason, the <main> tag should be located within the following HTML hierarchy:

  • It must be placed only under restricted parent elements such as <html>, <body>, <div>, and <form>.
  • Autonomous custom elements (independent user-defined tags) may also be used as parent elements.
  • As a rule, these parent elements must not have WAI-ARIA roles (role attributes) that alter the inherent semantic meaning of their tags.

Accessibility Considerations

In HTML, a "landmark" is a special role assigned to elements that describes the structure of a web page and enhances web accessibility. These landmark elements have a special semantic role that defines specific regions within a web page (e.g., header, main, footer, sidebar), making the page easier to understand and navigate, and playing a crucial role in conveying the page’s layout and structure to users of screen readers and other assistive technologies.

For more detailed information, please refer to the ARIA Landmarks Example.

The <main> tag represents the primary content area of a page and contains the core content within the page. Its corresponding role attribute value is main.

The following is an example of using a <div> tag with role="main" instead of the <main> tag to serve as the main landmark:

HTML 
<div role="main">
    <h1>Main Content Title</h1>
    .... Main content area ....
</div>

Except in cases where browser compatibility issues prevent the use of the <main> tag, it is recommended to use the <main> tag rather than relying on role="main".

Skip Navigation Link

On most pages, keyboard and screen reader users must navigate through long lists of navigation links and other elements before reaching the main content. This can be particularly challenging for users with certain types of mobility impairments. Requiring multiple actions before reaching the main content creates an accessibility barrier.

Of course, users who rely on a mouse and have sight do not experience this issue; they can quickly scan the page and find the main content almost immediately.

A skip navigation link provides keyboard and screen reader users the ability to jump directly to the main content.

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

    <!-- Navigation and header content -->

    <main id="main-content">
        <!-- Main content here -->
    </main>
</body>

This allows users to access the main content of the page more quickly.

Browser compatibility

Browser compatibility for the main tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<main> 26 12 21 7

Specifications

Specification for the main tag
Specification
<main> HTML Standard
#the-main-element

References

See also