Main landmark

The HTML <main> element, as defined in the HTML specification, is one of a number of structural elements for common document divisions. By default it has a landmark role of main. It should contain the primary content of a page, beginning with a <h1> heading.

Recommendations

Include exactly one element with a main role in a document.

Why it matters

The main landmark role enables many keyboard users with assistive technologies such as screen readers to skip directly to the main content of a page, bypassing navigation and other content.

The <main> element is well supported, except for Internet Explorer 11 and lower, which need an explicit role="main" attribute and styling of display:block;.

Examples

Recommended:

<style> main {display:block;} </style>
<main role="main"></main>

Not recommended:

<div id="main-content"></div>

Testing

Check that if the source code contains a <main> element, the <main> element includes a main role as per the example above. Check that there is exactly one instance of role="main" in the source code.