Main Landmark

A main landmark identifies the primary content of the page.

ARIA 1.2 Specification: main landmark

Design Patterns

• Each page should have one main landmark.
• The main landmark should be a top-level landmark.
• When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark.
• If a page includes more than one main landmark, each should have a unique label.

Use the HTML main element to define a main landmark.

HTML Example: One Main Landmark

When only one main landmark on a page, a label is optional.

<main>

<h1>title for main content<h1>

.... main content area ....

</main>

HTML Example: Multiple Main Landmarks

When there is more than one main landmark on a page, each should have a unique label.

<main aria-labelledby="title1">

<h1 id="title1" >title for main content area 1<h1>

.... main content area 1 ....

</main>

....

<main aria-labelledby="title2">

<h1 id="title2" >title for main content area 2<h1>

.... main content area 2 ....

</main>

A role="main" attribute is used to define a main landmark.

ARIA Example: One Main Landmark

When only one main landmark exists on a page, a label is optional.

<div role="main">

<h1>title for main content<h1>

.... main content area ....

</div>

ARIA Example: Multiple Main Landmarks

When there is more than one main landmark on a page, each should have a unique label.

<div role="main" aria-labelledby="title1" >

<h1 id="title1" >title for main content area 1<h1>

.... main content area 1 ....

</div>

....

<div role="main" aria-labelledby="title2" >

<h1 id="title2" >title for main content area 2<h1>

.... main content area 2 ....

</div>