Main and Aside
Mark the primary content and side content of a page.
Syntax
<main> ... <aside> ... </aside> </main>Two more semantic elements describe the layout of a page.
<main>— the dominant, primary content of the page. There should be only one per page.<aside>— content indirectly related to the main content, such as a sidebar or call-out box.
Example
Loading editor…
Press Run to see the result.
When to use it
- A blog layout uses <main> for the article body and <aside> for a sidebar with related posts and ads.
- A documentation site uses <main> to contain the current page content and <aside> for a table of contents.
- A news article page uses <aside> to surface a "Did you know?" callout that is related but not essential to the main story.
More examples
Main content with sidebar aside
<main> holds the primary page content; <aside> holds supplementary material related to it.
<div class="layout">
<main>
<h1>HTML Semantic Elements</h1>
<p>Semantic tags improve accessibility and SEO...</p>
</main>
<aside>
<h2>Related Topics</h2>
<ul>
<li><a href="/css">CSS Basics</a></li>
<li><a href="/accessibility">Accessibility</a></li>
</ul>
</aside>
</div>Main with skip link for keyboard nav
A skip link jumping to <main id="main-content"> lets keyboard users bypass repetitive header navigation.
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>...</header>
<main id="main-content">
<h1>Welcome</h1>
<p>This is the main content.</p>
</main>Aside for a pull quote callout
<aside> inside an article marks a pull quote as supplementary; it enriches but is not essential to the main text.
<article>
<p>HTML is the backbone of the web. Millions of developers use it daily.</p>
<aside>
<blockquote>
"The web is for everyone."
<footer>— Tim Berners-Lee</footer>
</blockquote>
</aside>
<p>Semantic HTML makes pages more accessible to all users.</p>
</article>
Discussion