HTML Elements Reference: MAIN Element

asp.net.ph

Home > Abakada: Back to Basics > Language References > HTML Elements > MAIN Element

Represents the dominant content of the document.

HTML 5

<main
   class = classname
   id = value
   style = css_style_rules
   title = text
>

NOTE: Both start and end tags are required.

The <main> element represents the dominant content of the document.

The content of a <main> element should be unique to the document, that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

It should exclude any content that is repeated across document sections such as sidebars, navigation links, copyright information, site logos, and search forms.

A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, and form.

A document must not have more than one main element that does not have the hidden attribute specified.

The element can be styled using CSS for typographical effects, to project it visually as the main content.

Browser reader mode functionality looks for the presence of the <main> element, as well as heading and content sectioning elements when converting content into a specialized reader view.

The <main> element has no attribute of its own, but supports global attributes common to all HTML elements.

The following example shows how the <main> element may be used.

The sample uses a technique known as skip navigation, that allows an assistive technology user to quickly bypass large sections of repeated content ( headers, navigation, etc. ). This lets the user access the main content of the page faster.

<body>
   <a href="#main-content">Skip to main content</a>

   <!-- navigation and header content -->

   <main id="main-content">
      <!-- main page content -->
   </main>
</body>