<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> 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.
<main> element doesn't have any specific attributes; it uses the global attributes applicable to all HTML elements.
<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.
<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
<main>elements can confuse assistive technologies and harm the user experience.
<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.
For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.