The <main> element marks the page’s central, page-specific content—the part that changes when you visit a different page. It usually sits after the header and navigation, while shared elements such as the footer stay outside it. section 11.6
Think of <main> as the stage for the page’s most important act. On a personal page, it can hold body text about you; in a gallery, it can hold the thumbnails visitors came to see. section 5.26 section 15.7
A useful way to plan the element is to ask:
- What content is unique to this page? Put that content in <main>. section 11.6
- Does the page need multiple regions? Place elements such as <article> and <aside> inside <main>. section 12.17
- Is the content a gallery? Make each thumbnail link to its full-size photo, then let the thumbnails wrap inside <main>. section 15.28
A page’s central stage
<body> can contain a shared header and navigation, followed by <main>. Inside it, an article can carry the primary content and an aside can provide a sidebar. With flexbox, <main> can arrange those regions and expand to fill available vertical space. section 11.6 section 12.17
<main>
<article>
<h2>Article Title</h2>
<p>Article paragraph 1</p>
<p>Article paragraph 2</p>
</article>
<aside>
<h3>Sidebar Title</h3>
<p>Sidebar paragraph</p>
</aside>
</main>
Use this compact structure to see how <main> groups an article and sidebar while keeping the page regions easy to identify. section 12.17
