HTML: the `aside` element

The <aside> element marks content that supplements the main content, such as related links, a sidebar, or a note.

What you will learn

When supplementary content is a good fit for <aside>
How an aside relates to <main> and <article>
How to give meaningful related content structure instead of using it only for decoration

Related information

<article>
  <h2>How to grow herbs</h2>
  <p>Choose a sunny place and water the soil regularly.</p>
  <aside>
    <h3>You may also need</h3>
    <p>See our guide to indoor light levels.</p>
  </aside>
</article>

Inside an <article>, the aside can contain information related to that article but not central to its main flow.

Page-level side content

<main>
  <h1>Learning HTML</h1>
  <p>The main lesson appears here.</p>
</main>
<aside aria-label="Related resources">
  <h2>Related resources</h2>
  <ul><li><a href="/css/">Learn CSS</a></li></ul>
</aside>

At page level, an aside can hold related links or information that supports the main content. Give it a heading or an accessible label when its purpose is not obvious.

Common mistakes

Putting essential article content in an aside where its relationship is unclear.
Using <aside> for every sidebar-like box, including purely decorative panels.
Leaving a long list of links without a heading or accessible label.
Using <aside> instead of <main> for the page's primary content.