The <main> HTML Element | Web Reference

Overview

The <main> element is a fundamental structural component in HTML, dedicated as the container for the primary content of a webpage.

Examples and Usage

The primary purpose of the <main> element is to ensure a clear, semantic web structure. It captures information that is directly related to or expands upon, the central theme or topic of the document. In contrast, repeatable sections like navigation links, copyright notes, sidebars, forms, or branding assets do not typically belong inside <main>. Instead, <main> should prioritize content or functionalities unique to the specific page or application.

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <!-- Typical site header -->
    <header>
        <!-- Navigation and branding -->
    </header>

    <main>
        <!-- The core content of the page -->
        <h1>Welcome to Our Website</h1>
        <p>Discussion on the central theme of the page.</p>
        <!-- Other main content pieces -->
    </main>

    <!-- Site-wide footer -->
    <footer>
        <!-- Copyright and other links -->
    </footer>
</body>
</html>

Adhering to best practices, a document should only contain one visible <main> element to avoid confusion. Content within the <main> should be unique to the document, and it's essential to avoid including repeatable sections.

Attribute Breakdown

The <main> element doesn't have any specific attributes; it uses the global attributes applicable to all HTML elements.

Accessibility Aspects

The <main> element offers significant benefits to web accessibility:

The inherent nature of the <main> element allows it to act as a main landmark. These landmarks guide assistive technologies, enabling swift identification and navigation through significant document sections. Opting for the <main> element directly is more favorable than using the attribute role="main", especially when not constrained by legacy browser compatibility issues.

Additionally, many modern browsers offer a "Reader Mode" which transforms web content into a distraction-free reading view. These modes often use the presence of the <main> element, along with other sectioning elements, to determine the primary content to be displayed.

Another useful technique is "Skip Navigation". As an approach, it empowers users of assistive tools to bypass extensive chunks of redundant content like navigation sections. By appending an id attribute to the <main> element, it becomes an effective target for a skip navigation link.

Associated Elements

<html>
<head>
<body>
<article>
<aside>
<footer>
<header>
<nav>

Additional Notes

The <main> element distinguishes the core content, but it doesn't impact the document's outline in the DOM. Instead, it offers semantic clarity.
A document should strictly contain only one <main> element that doesn't carry the hidden attribute. Multiple <main> elements can confuse assistive technologies and harm the user experience.
While the <main> element is predominantly used for primary content, it's essential to avoid nesting other landmark elements within it unless they are part of the main content.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes	Yes	Yes	Yes	Yes	No

Useful Resources

Can I use HTML element: main

The HTML Living Standard Specification: main

WebAIM's Guide on "Skip Navigation"