aside Element in HTML
Sidebars, Related Content & Examples

HTML <aside> Element: Meaningful Side Notes

In writing, we often pull readers aside to offer tips, fun facts, or links that enhance the main content. In HTML, the <aside> element does the same — it holds content that is related, but not essential to the primary flow.

What Is the <aside> Element?

The <aside> element represents tangential content. It’s often used for sidebars, widgets, related links, pull quotes, or background context. It can be placed inside the main content or outside of it, depending on the context.

Basic Syntax

<aside>
  <h3>Did You Know?</h3>
  <p>Bananas are technically berries, but strawberries are not!</p>
</aside>

Did You Know?  
Bananas are technically berries, but strawberries are not!

Typical Uses of <aside>

• Blog post sidebars
• Related articles or external links
• Author bios or ads
• Definitions or glossary terms
• Callouts and helpful hints

Example: Article with Sidebar

<main>

  <article>
    <h2>Cherry Health Benefits</h2>
    <p>Cherries are rich in antioxidants and help reduce inflammation.</p>
  </article>

  <aside>
    <h3>Related Links</h3>
    <ul>
      <li><a href="/apple-benefits">Benefits of Apples</a></li>
      <li><a href="/banana-energy">Bananas for Energy</a></li>
    </ul>
  </aside>

</main>

Cherry Health Benefits  
Cherries are rich in antioxidants...

Sidebar:  
• Benefits of Apples  
• Bananas for Energy

Here, the <aside> is placed within the page layout, offering helpful but non-essential info.

Inside vs Outside the Main Content

You can use <aside> both inside an <article> or outside it. Placement changes how it’s interpreted:

• Inside <article>: related to that article specifically
• Outside <article>: related to the whole page or site

Example: Embedded Aside in Article

<article>
  <h2>Exploring the World of Bananas</h2>
  <p>Bananas are a global fruit with deep roots in history...</p>

  <aside>
    <p>Tip: To speed up ripening, store bananas in a paper bag.</p>
  </aside>

</article>

ARIA & Accessibility

<aside> is already semantic, but for clarity, you can use aria-labelledby to link it to a heading inside it.

<aside aria-labelledby="related-heading">
  <h3 id="related-heading">Related Articles</h3>
  <ul>
    <li><a href="/fruits/apple">All About Apples</a></li>
  </ul>
</aside>

Best Practices

• Use <aside> for content that enhances but isn’t vital to the main narrative
• Always include a heading inside your aside for clarity
• Don’t use it for layout or structural purposes — keep it contextual

Summary

The <aside> element brings balance to your content — offering helpful details without crowding the spotlight. You've now learned how to:

• Use <aside> for sidebars, links, and supplemental content
• Structure it inside or outside main content appropriately
• Enhance accessibility with semantic structure and ARIA labels

What’s Next?

Next, we’ll explore the <main> element — the core container for your primary page content.