HTML aside Element

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.

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.

<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!

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

<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.

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

<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>

<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>

• 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

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

Choose the option that lists all and only the correct statements.

1. Sidebars with related links
2. Advertisements
3. Main article content
4. Pull quotes or notes

Choose the option that lists all and only the correct statements.

1. Using it for unrelated advertisements
2. Including it for tangential information or notes
3. Using it as a sidebar for related content
4. Embedding primary navigation menus

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