The aside element marks content that supports the page without being part of its unique main content. Think of it as a helpful sidebar: site news, a social feed, or a related quotation. section 11.9
Use an aside in a few simple steps:
- Place it inside the main element, often after the article element. section 11.9
- Add it more than once when the page has several complementary areas. section 11.9
- Treat mobile space as precious: hide a nonessential aside by default and reveal it at wider screen sizes with a media query. section 13.15
A compact article and sidebar
Build a main area with an article for the page’s primary content and an aside for a sidebar title and supporting paragraph. Style both columns with CSS; a sidebar generally uses no more than about 25 percent of the available width. section 11.19
<body>
<header>
…
</header>
<nav>
…
</nav>
<main>
<article>
…
</article>
<aside>
…
</aside>
</main>
etc.
</body>
Browse the page outline to see the aside nested in main after the article. section 11.9
