The main content of a document.
Description
The main content of a document.
This marks the content that is directly related to or expands upon the central topic of the document. The main role is a non-obtrusive alternative for “skip to main content” links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by assistive technologies.
User agents SHOULD treat elements with the role of main as navigational landmarks.
Within any document or application, the author SHOULD mark no more than one element with the main role.
Note: Because document and application elements can be nested in the DOM, they may have multiple main elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.
Role=Main 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>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>HTML Example 3
<!-- header & nav here -->
<div role="main">
<p>Lorem ipsum...</p>
</div>
<!-- footer here -->Characteristics
Superclass Role
- landmark
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Semantic HTML
Use the HTML5 <main> tag.
<main>…</main>
<main hidden>…</main>
<main hidden>…</main>
The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
Reference
- W3C (opens new window)