The <main> element marks the part of a web page that is unique to the current page: its primary, one-of-a-kind content. Think of it as the page’s main event, while the header, navigation, sidebar, and footer handle the familiar supporting cast. section 11.6 section 11.11
Use one <main> element per page. It commonly comes after <header> and <nav>, then holds the content visitors came to see. Semantic elements give that structure a name that screen readers and other software can interpret more easily than a pile of anonymous <div> tags. section 11.6 section 11.3
PLAY: Mark the unique content
Put shared branding and links outside <main>, then place the page-specific material inside it. Here, the header and navigation can recur across a site, but the content inside <main> belongs to this page alone. section 11.6
<header>
<img src="/images/SD-logo.png" alt="Semantics Depot logo">
<h1>Semantics Depot</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#">About Us</a>
</nav>
<main> #1
Unique content goes here
</main> #1
This small layout shows <main> after the shared header and navigation, with a clear placeholder for unique content. section 11.6
What goes inside depends on the page. A photo gallery can use <main> for linked thumbnail images. A portfolio page can use it for several <section> elements, each containing a distinct part of the portfolio. One container, many possibilities—no cape required. section 15.6 section 20.5
REMEMBER: <main> is for content that is:
- Unique to the current page, rather than repeated site-wide navigation, introductory material, side content, or closing material. section 11.11 section 11.6
- The primary content area, whether it contains images, sections, text, or other page-specific markup. section 15.6 section 20.5
- Marked up once per page with a single <main> element. section 11.11 section 11.6
