HTML The aside Element

The <aside> element marks up content that is related to the surrounding content but not part of its main flow — things like sidebars, pull quotes, advertising, glossary definitions, or a set of links to related articles. It tells both browsers and assistive technology “this is a side note, you can skip it and still understand the main content.” Using it correctly makes your document outline meaningful and helps screen reader users jump straight past supplementary material to the content they actually came for.

Overview / How it works

Semantically, <aside> represents a section of a page that is tangentially related to the content around it. The key word is tangential: the content inside an <aside> should be connected to the surrounding content in some way, but removable without harming the reader’s understanding of the main content. A blog post’s main argument should make complete sense even if every <aside> on the page were deleted.

<aside> is a block-level, sectioning-adjacent element. It does not create a new heading-outline entry the way <section> or <article> conceptually do, but it does establish its own region in the accessibility tree: browsers expose it with the ARIA role complementary. That role is what lets screen reader users open a “landmarks” list and jump directly to (or past) the aside content.

Where you place an <aside> in the DOM changes what it’s related to. An <aside> nested inside an <article> is understood to relate specifically to that article (for example, a pull quote or an author bio for that one post). An <aside> placed as a direct child of <body>, outside any <article>, is understood to relate to the page as a whole — a classic sidebar with site-wide links, a search box, or a “recent posts” widget.

By default, browsers render <aside> with no special visual styling at all — it behaves like a plain block-level element, similar to a <div>, stacking full-width above and below neighboring content. Any sidebar-like column layout, border, or background color you see on real websites comes entirely from CSS (floats, flexbox, or grid), not from the element itself. HTML supplies the meaning; CSS supplies the look.

Syntax

<aside>
  <h3>Related content heading</h3>
  <p>Tangentially related content goes here.</p>
</aside>
  • Opening and closing tags are both required — <aside> is not a void element.
  • <aside> accepts standard global attributes (id, class, lang, data-*, etc.) but has no attributes of its own.
  • It can contain flow content: headings, paragraphs, lists, images, even nested <article> or <section> elements.
  • Giving the aside its own heading (<h2>–<h4>, sized appropriately to its nesting depth) helps sighted users and screen reader users alike understand what the side content is about.

Examples

Example 1: A pull quote inside an article

<article>
  <h2>Why Bees Matter</h2>
  <p>Bees pollinate roughly a third of the crops humans eat, from almonds to apples.</p>
  <aside>
    <p>“One in three bites of food you eat exists because of pollinators.”</p>
  </aside>
  <p>Despite this, wild bee populations have declined sharply over the last two decades.</p>
</article>

Result: The browser renders three paragraphs of plain text stacked vertically, in document order, with no visual distinction by default — the pull quote appears as an ordinary paragraph between the other two. Its semantic value shows up in the accessibility tree, where the quoted sentence is marked as a complementary landmark nested inside the article, distinguishing it from the article’s main argument.

This is the classic use case: the quote repeats or highlights something already said in the article, so it’s tangential (skippable) rather than essential.

Example 2: A page-level sidebar

<body>
  <main>
    <h2>Getting Started with Hiking</h2>
    <p>Choose boots that fit well and break them in before a long trail.</p>
  </main>
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="/trail-safety">Trail Safety Basics</a></li>
      <li><a href="/packing-list">The Ultimate Packing List</a></li>
    </ul>
  </aside>
</body>

Result: The browser shows a heading and paragraph from the main article, followed by a “Related Articles” heading and a bulleted list of two links, all stacked full-width (no columns) since no CSS layout has been applied. Screen readers announce this <aside> as a separate complementary landmark from the <main> landmark, letting users jump between them directly.

Example 3: Multiple asides for different purposes

<article>
  <h2>Understanding Photosynthesis</h2>
  <p>Plants convert light energy into chemical energy stored in glucose.</p>
  <aside>
    <h3>Quick Fact</h3>
    <p>A single large tree can produce enough oxygen for two people per day.</p>
  </aside>
  <p>The process occurs mainly in the chloroplasts of plant cells.</p>
  <aside>
    <h3>Glossary</h3>
    <p><strong>Chloroplast:</strong> a cell structure where photosynthesis takes place.</p>
  </aside>
</article>

Result: The browser displays the article’s paragraphs interspersed with two labeled side notes (“Quick Fact” and “Glossary”), each rendered as an ordinary heading-plus-paragraph block since no styling is applied. A page can contain as many <aside> elements as needed, each independently marked as complementary content.

How it works step by step

When the browser’s HTML parser encounters <aside>, it builds a normal element node in the DOM tree, just like it would for a <div> or <section> — there is no special parsing behavior or implicit tag insertion involved. What differs is what happens next, in the accessibility tree construction phase: the browser maps <aside> to the implicit ARIA role complementary, unless a nested <article>, <section> or another <aside> gives it a more specific context. Assistive technologies then read this role when building their landmark navigation menus. Visually, the CSS rendering engine treats <aside> exactly like any other unstyled block-level element: full container width, top and bottom margins from the user-agent stylesheet’s paragraph-like defaults do not apply (asides get no default margin), and it stacks in normal document flow unless CSS overrides that with floats, flexbox, or grid.

Common Mistakes

Mistake 1: Using <aside> for any visually side-positioned box. Some authors reach for <aside> purely because content will be styled to sit in a sidebar column, even when that content is core navigation or unrelated advertising with no topical connection to the page.

<aside>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</aside>

Primary site navigation is not tangential — it’s essential to using the site. It belongs in a <nav> element directly, not wrapped in <aside>:

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

Mistake 2: Leaving an aside with no internal heading when it holds multiple distinct topics, or forgetting to close the tag. An unclosed <aside> lets the parser’s error-recovery rules swallow unrelated later content into the same element, corrupting your accessibility landmarks:

<aside>
  <p>Related fact about bees.
<p>This paragraph about butterflies gets nested inside the aside by mistake.</p>

Always close every tag explicitly, and give an aside a heading when its content covers more than one idea, so both sighted users and screen reader users know what they’re looking at:

<aside>
  <h3>Bee Facts</h3>
  <p>Related fact about bees.</p>
</aside>
<p>This paragraph about butterflies stays in the main flow, where it belongs.</p>

Best Practices

  • Only use <aside> for content that is genuinely tangential — if removing it would break the reader’s understanding of the main content, it isn’t aside material.
  • Nest an <aside> inside an <article> when it relates specifically to that one piece of content (a pull quote, an author bio); keep it outside as a sibling of <main> when it relates to the whole page (a sitewide sidebar).
  • Give each aside a heading (<h2> through <h4>, matched to its nesting level) so its purpose is clear out of context.
  • Do not use <aside> for primary navigation, essential forms, or core page content — use <nav>, <form>, or <main>/<article> instead.
  • Remember that <aside> carries no default visual styling; use CSS (grid, flexbox, or floats) to actually position it as a sidebar column.
  • Test with a screen reader’s landmark list (or the browser’s accessibility inspector) to confirm your asides show up as complementary regions in a sensible order.

Practice Exercises

Exercise 1: Write an <article> about a recipe with at least two paragraphs, and add an <aside> containing a “Did You Know?” fact about one of the ingredients. Give the aside its own heading.

Exercise 2: Build a page skeleton with <main> holding a short article and a sibling <aside> holding a list of three “Popular Posts” links. Decide whether the aside should be inside or outside <main>, and be ready to explain why.

Exercise 3: Take a page that currently uses <aside> to wrap its main navigation menu (a misuse) and rewrite it correctly, moving the navigation into a <nav> element instead.

Summary

  • <aside> marks content that is tangentially related to what surrounds it, such as sidebars, pull quotes, or glossaries.
  • Content inside an aside should be removable without breaking the reader’s understanding of the main content.
  • Browsers expose <aside> with the implicit ARIA role complementary, letting assistive technology treat it as a skippable landmark.
  • Nesting placement matters: inside an <article> it relates to that article; outside, as a sibling of <main>, it relates to the whole page.
  • <aside> has no default visual styling — sidebar layout comes from CSS, not the element itself.
  • Never use <aside> as a substitute for <nav>, essential forms, or core page content.