The <main> Element
As defined in the HTML Living Standard, the <main> element represents the dominant content of the body of a document. This content is directly related to or expands upon the central topic of a document or central functionality of an application.
<body>
<header>...</header>
<main id="main-content">
<h1>Welcome to SimpleAccess</h1>
<p>This is the unique content of this page.</p>
</main>
</body>
View HTML Living Standard: The main element
Accessibility Landmark: main
The <main> element is programmatically mapped to the ARIA main landmark.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using the <main> element allows screen reader users to skip directly to the primary content of the page using landmark navigation (often the 'M' key). This provides a significant efficiency boost over pages built entirely with generic <div> tags.
The Skip Link Destination
A standard accessibility best practice is to provide a "Skip to Main Content" link at the very top of the page.
WCAG Requirement: Bypass Blocks
Success Criterion 2.4.1 (Level A): A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
The <main> element is the ideal target for this skip link. By assigning an id="main-content" to the <main> tag, you provide a clear, reliable anchor for keyboard users to jump past headers and navigation menus.
Usage Rules
- One per Page: A document must not have more than one
<main>element that is not hidden (e.g., using thehiddenattribute). - Placement: It should not be a descendant of an
<article>,<aside>,<footer>,<header>, or<nav>element. - Content: It should only contain content that is unique to the page, excluding recurring items like logos, search bars, or site-wide navigation.
A11y Tip: Naming Landmarks
If for some reason you must use multiple <main> elements (e.g., in a single-page application where only one is visible at a time), ensure the hidden attribute is used correctly so that assistive technology only perceives one active main area.