HTML <main> element

The <main> element represents the dominant content of the document. It contains the central material that the page exists to present.

This usually excludes repeated site material such as the header, navigation, sidebar, advertising blocks, and footer. Those parts may be important to the page, but they are not the main content that makes this page this page.

For example, on an HTML reference page, the main content would be the explanation of the element, its attributes, and its examples. The banner, site navigation, and footer would normally sit outside <main>.

This does not exclude every header, footer, or navigation area. An article inside <main> can have its own header and footer, and a long guide can have a table of contents. These belong to the page's central material rather than the repeated site framework.

A document must not have more than one <main> element without the hidden attribute. Some single-page applications keep several main elements and use that attribute on the inactive ones. Hiding extra main elements with CSS alone does not satisfy this rule.

Place <main> high in the page structure, normally directly inside <body> or within <div> wrappers. It must not be nested inside <article>, <aside>, <nav>, <section>, <header>, <footer>, or another <main>. The permitted ancestors are <html>, <body>, <div>, a <form> without an accessible name, and autonomous custom elements.

The element gives the page a clear centre of gravity. It provides a main landmark that screen-reader users can jump to, and an id on it can provide a destination for a "Skip to content" link.

Attributes: GLOBALS.

Typical layout:
<body>
  <header>PageRIJ HTML reference</header>

  <main>
    <h1>HTML lists</h1>
    <p>Use ul when the order of items does not matter,
      and ol when their sequence matters.</p>
  </main>

  <footer>Published by CityRoadCode.</footer>
</body>

Visual representation: