`<main>` wraps the unique-to-this-page content (screen readers jump to it with a keyboard shortcut). `<aside>` is supporting / tangential content — sidebars, callouts, related links.
HTML
<body>
<header><!-- site header --></header>
<div class="page-layout">
<main>
<article>
<h1>Title of this page</h1>
<p>The unique-to-this-page content lives here.</p>
</article>
</main>
<aside aria-label="Related articles">
<h2>You might also like</h2>
<ul>
<li><a href="/posts/a">Related post A</a></li>
<li><a href="/posts/b">Related post B</a></li>
</ul>
</aside>
</div>
<footer><!-- site footer --></footer>
</body>
<!-- Rules:
• Exactly ONE <main> per page (un-hidden).
• <main> goes INSIDE <body>, never inside header/footer/article.
• <aside> can appear inside or outside an <article>:
inside → "related to this article"
outside → "related to the whole page" -->Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.