Summary

The main element is only needed if there is repeated preliminary content in a document that a user needs to bypass to get to the primary content.

Techniques

Example

Example 1 — Repeated page header

The following example shows how the main element can be used to bypass a repeated page header in a fixed layout publication.

<body>
   <header>
      <div class="pagenum even" role="doc-pagebreak">4</div>
      <div class="pub">Moby Dick</div>
      <div class="chap">I. Loomings</div>
   </header>
   <main>
      <!-- primary narrative of the page -->
   </main>
</body>

Explanation

The main element is used to identify the primary content of a web page. It was introduced in HTML5 and provides a solution to the older practice of placing "skip to content" links at the top of pages so that users of assistive technologies could bypass any periphery repeated content (e.g., site headers, navigation, ads).

The main element is treated by assistive technologies as a landmark, so users are able to jump directly to the element when it is present. It is equivalent to the ARIA main role.

The need for bypass links in digital publications is not nearly as common as it is on the web generally, however. As publications are not wrapped inside of web page site trappings, there are not many publications that can benefit from identifying the start of the primary content. Fixed layout publications might include repeated page headers, might be one example, but even those are rare.

Care should be taken not to use the main element to bypass important content just because it precedes the primary narrative. In a textbook, for example, the chapter header, mini table of contents, learning objects and similar content may occur before the text of the chapter, but none of these are repeated content. They are unique to each chapter. Placing them before the main element may cause users to miss them.

Note that the HTML body element can only have one main element without a hidden attribute specified on it. It is also not possible for sectioning content such as article or aside to have their own main content sections.

It is not necessary to provide a label for the main element when there is only one instance, but one can be provided using either the aria-label or aria-labelledby attributes when there are multiple.

Related Links