<aside>

Syntax

<aside>
  <h3>Related Links</h3>
  <ul>...</ul>
</aside>

Examples

<main>
  <article>...</article>
</main>
<aside>
  <h3>Popular Posts</h3>
  <ul>
    <li><a href="#">Post One</a></li>
    <li><a href="#">Post Two</a></li>
  </ul>
</aside>

<article>
  <p>Long article text continues here...</p>
  <aside>
    <blockquote>Key takeaway: semantic HTML improves accessibility.</blockquote>
  </aside>
  <p>The article continues...</p>
</article>

<article>
  <h2>10 Tips for Clean Code</h2>
  <p>Article content...</p>
</article>
<aside>
  <h4>About the Author</h4>
  <p>Jane writes about software craftsmanship.</p>
</aside>

Best practices

• Use <aside> for content that is related but not essential to understanding the main content
• Do not use <aside> purely as a styling hook for a sidebar-looking box that is actually essential content
• An <aside> nested inside an <article> should relate specifically to that article, not the whole page
• Give the aside its own heading when it has one, so it makes sense as an independent block

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard