HTML Aside Element

Think of the side column of a newspaper article: a small box with "More on this topic", a quote pulled out in large type, or a note about the author. You can read the story without it, and nothing in the story is missing if you do. But it is related, and a curious reader might enjoy it.

On the web, the <aside> element marks exactly that kind of content: related, but separate from the main flow. Used correctly, it helps screen reader users skip the extras, or find them, and keeps your page structure honest.

What You Will Learn

What <aside> means, and the remove-it test
What belongs in an aside, and what does not
Page-wide sidebars versus asides inside an article
How an aside is announced (the complementary landmark), and how to name it
Pull quotes, notes, and callouts
Building a responsive sidebar layout with the right HTML order
Handling ads and third-party widgets safely
Accessibility, global notes, and common mistakes

The Basics

HTML Code
Browser Output

index.html
<main>
  <article>
    <h1>How to bake bread</h1>
    <p>Mix flour, water, salt, and yeast. Knead until smooth…</p>
  </article>
</main>

<aside aria-labelledby="related-title">
  <h2 id="related-title">Related reading</h2>
  <ul>
    <li><a href="/posts/sourdough">A simple sourdough loaf</a></li>
    <li><a href="/posts/cookies">Chewy chocolate cookies</a></li>
    <li><a href="/posts/pizza">Pizza dough in an hour</a></li>
  </ul>
</aside>

style.css
aside {
  padding: 1rem;
  background: #fef9c3;
  border-radius: 8px;
}

Like the other structural elements, <aside> has no default look. It is a plain block. Putting it in a column, adding a background, or floating it to the side is all CSS.

The Remove-It Test

How do you know content is an aside? Ask:

If I removed this, would the main content still be complete and make full sense?

If yes, it is a good candidate for <aside>. If the main content would then be missing something important, the content is part of the main content, and <aside> is the wrong choice.

Content	Aside?	Why
A "Related reading" list	Yes	Nice to have, not part of the story
A page sidebar with archives, tags, or a newsletter box	Yes	Extra, repeated around the site
A pull quote repeating a line from the article	Yes	A decorative repeat
A short author bio beside a post	Yes	Related, not essential
A glossary definition for a term	Yes	A tangent
An advertisement	Yes (the specification names it)	Separate from the content
A warning the reader must see to follow the steps safely	No	It is part of the content
The instructions for a form	No	Needed to understand the form
The page's main menu	No	Use `<nav>`
The site footer	No	Use `<footer>`

Two Places an Aside Can Live

An aside placed next to the main content, related to the whole page or the whole site. Put it after <main> in the HTML, not inside it:

<body>
  <header>…</header>
  <main>…</main>
  <aside aria-label="Sidebar">…</aside>
  <footer>…</footer>
</body>

2. An aside inside an article or section

An aside that is related to one article or one part of the page. Put it inside that article:

<article>
  <h2>How to bake bread</h2>
  <p>Mix flour, water, salt, and yeast…</p>

  <aside>
    <h3>Did you know?</h3>
    <p>Flour absorbs more water on humid days.</p>
  </aside>

  <p>Knead until smooth…</p>
</article>

How an Aside Is Announced

A page-level aside is exposed to assistive technology as the complementary landmark, one of the regions a screen reader user can jump between, along with banner, navigation, main, and contentinfo.

For an aside nested inside an article or section, behaviour has changed over time. Recent specifications treat it as a plain related block unless it has a name, and tools differ. So the safe habit is:

Give every important aside a name (aria-labelledby pointing at its heading, or a short aria-label).
Do not count on a nested, unnamed aside appearing in a landmark list.

Try It: Where Does It Go?

Move the aside, name it or not, and ask what a screen reader would make of it. The script uses the same rule you would apply by hand.

HTML Code
Browser Output

index.html
<!-- Page sidebar: a complementary landmark -->
<main>
  <article>…</article>
</main>
<aside>
  <strong>Related:</strong> sourdough, cookies, pizza dough
</aside>

<!-- Aside inside an article: related content, best to name it -->
<article>
  <h2>How to bake bread</h2>
  <p>…</p>
  <aside aria-label="Baking tip">
    <strong>Did you know?</strong> Flour absorbs more water on humid days.
  </aside>
</article>

script.js
document.querySelectorAll("aside").forEach((aside) => {
  const nested = aside.closest("article, section");
  const named = aside.getAttribute("aria-label") || aside.getAttribute("aria-labelledby");

  console.log(
    nested
      ? "Nested aside (" + (named ? "named" : "unnamed") + ")"
      : "Page-level aside: complementary landmark"
  );
});

Common Uses

Use a heading and a list, as in the first example of this lesson.

A pull quote

A pull quote repeats a striking line from the article in large type, as a design feature. It duplicates text, so a screen reader would read it twice. Hide the duplicate from assistive technology:

<aside class="pull-quote" aria-hidden="true">
  <blockquote>Great bread is mostly patience.</blockquote>
</aside>

Be careful: only use aria-hidden="true" on content that is a pure repeat, and never on anything that can receive focus.

A note or callout

Short tips and warnings inside a lesson look like asides, but ask the remove-it test first:

If it is a tangent ("Fun fact"), use <aside>.
If it is essential ("Do not unplug the device during the update"), keep it in the main flow, perhaps with role="note" or in a normal paragraph with a clear label.

<div role="note">
  <strong>Tip:</strong> Use a kitchen scale for the most reliable loaf.
</div>

An author bio

<aside aria-label="About the author">
  <img src="/img/ada.jpg" alt="Ada Lovelace" width="64" height="64" />
  <p><strong>Ada</strong> bakes bread every weekend and writes about it.</p>
</aside>

Advertisements and sponsored content

The specification lists advertising as a fair use of <aside>. Be honest and careful:

<aside aria-label="Advertisement">
  <p>Sponsored</p>
  <a href="https://example.com/offer" rel="sponsored noopener">Try fresh flour delivery</a>
</aside>

Label it clearly ("Advertisement" or "Sponsored"), in text.
Use rel="sponsored" on paid links.
Do not interrupt reading order with ads that steal focus, autoplay sound, or jump around the page.
Reserve space (width and height), so loading ads does not shift the content.

A sidebar is usually shown beside the main content on wide screens, and below it on phones. The right way to build this is:

Put <main> first and <aside> second in the HTML.
Use CSS grid to place them side by side on wide screens.
On narrow screens, let them stack in the HTML order.

style.css
.layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .layout {
    grid-template-columns: 3fr 1fr;   /* main on one side, aside on the other */
  }
}

Drag the slider to see the layout change while the HTML order stays the same:

http://127.0.0.1:5500/index.html

Screen width: 720px

main

The article text comes first in the HTML.

Wide screen: two columns, side by side. The order in the HTML never changes.

If you want the sidebar on the left visually, use grid-template-areas or the order property, but keep in mind that screen readers and the Tab key follow the HTML order, not the visual one. Keeping the main content first means keyboard users reach it before the sidebar's links.

Accessibility at a Glance

Use <aside> only for related, non-essential content (the remove-it test).
Name important asides with aria-labelledby or aria-label, so they are easy to find and tell apart.
Give each aside a heading when it has more than a line or two of content.
Keep HTML order logical: main content first, sidebar after.
Hide pure repeats (pull quotes) from assistive technology with aria-hidden="true", but never anything focusable.
Do not hide essential information in an aside that disappears on small screens.
Label ads and sponsored content in text, and keep them from stealing focus.
Make sure links in sidebars have descriptive text and visible focus.
Check contrast of the aside's background and text (at least 4.5 to 1).

Security and Privacy Notes

Third-party widgets in a sidebar (ads, social buttons, chat, comment systems) run code from other companies, and often track your visitors. Load only trusted ones, tell visitors about them, and respect consent rules.
Use sandbox on iframes for embedded widgets (<iframe sandbox>), and give them only the permissions they need.
Use rel="sponsored noopener" on paid links, and rel="noopener" for outside links that open in a new tab.
Do not put private information in a sidebar that is "hidden" for some users. Hiding with CSS leaves it in the page source.
Escape user data such as a displayed name ("Welcome back, ...") before placing it in an aside.
Do not auto-load unknown content (such as a "related posts" feed from another domain) without checking it.

Global Audience Notes

Set lang on the aside if its content is in another language (a quote in French, an ad in Hindi).
Right-to-left pages: a grid that places the aside "at the end" mirrors automatically with dir="rtl", so the sidebar moves to the left. Avoid hard-coded left and right, and use logical properties.
Ads and related content may not suit every culture. Think about what is shown, to whom, and in which country.
Sidebars slow pages down, especially on slow mobile networks. Keep them light, and load widgets only when needed.
Do not hide essential content (like a legal notice or a safety warning) in a sidebar that is removed on small screens, where many people browse.
Keep text short, since translations of labels such as "Related reading" can be much longer.

Common Mistakes to Avoid

Putting essential content in an aside, such as safety warnings or instructions.
Using <aside> just to get a box on the side (use CSS on a <div>).
Using <aside> for the main menu (that is <nav>) or the site footer (that is <footer>).
Putting <aside> inside <main> when it is a page-wide sidebar.
Several unnamed asides, so a screen reader user cannot tell them apart.
Putting the sidebar first in the HTML, forcing keyboard users through it before the content.
Reading a pull quote twice because it was not hidden from assistive technology.
Hiding the aside with display: none on mobile, removing useful content for phone users.
Ads that look like content, with no "Advertisement" label.
Loading third-party widgets without sandboxing or consent.
Using aria-hidden="true" on focusable content.
Making everything an aside because "it is on the side."

Practice Time

Try these in your editor:

Build a page with <main> and an <aside> containing a "Related reading" list.
Style the page as two columns with CSS grid, and check the HTML order still reads main first.
Use @media so the aside moves below the content on narrow screens.
Give your aside a heading and link it with aria-labelledby.
Put a small "Did you know?" aside inside an article, and name it with aria-label.
Add a pull quote as an <aside> with aria-hidden="true".
Use the remove-it test on five pieces of content on a site you know. Decide which are asides.
Build an author bio aside with a picture and a short description.
Add an "Advertisement" aside with rel="sponsored noopener", and reserve space for it with width and height.
Bonus: open a screen reader's landmark list on your page. Is each aside named and easy to understand?

Quick Recap

Click a question to check your answer.

1. What is the <aside> element for?

For content that is related to the main content but separate from it, such as sidebars, related links, pull quotes, author bios, glossary notes, and advertisements.

2. What is the remove-it test?

Ask whether the main content would still be complete and make full sense without this block. If yes, <aside> fits. If something important would be missing, it is part of the main content.

3. How is an aside exposed to assistive technology?

A page-level aside is the complementary landmark. A nested, unnamed aside may be treated as a generic block by some tools, so name important asides with aria-labelledby or aria-label.

4. Where should a sidebar go in the HTML?

After <main>, outside it. Use CSS grid to place it beside the content on wide screens, and let it stack below on narrow ones, so keyboard and screen reader users reach the main content first.

5. How do you handle a pull quote?

Mark it as an <aside> and hide it from assistive technology with aria-hidden="true", because it only repeats text that is already in the article. Never use aria-hidden on focusable content.

6. What should you remember about ads and third-party widgets in an aside?

Label ads clearly, use rel="sponsored noopener", reserve space to avoid layout shifts, sandbox iframes, load only trusted code, and respect visitors' consent and privacy.

Key Takeaways

<aside> holds content that is related to, but separate from, the main content.
Use the remove-it test: if the main content stays complete without it, it is an aside. Essential content is not.
A page-level aside is a complementary landmark. Name your important asides, and give them headings.
Put a sidebar after <main> in the HTML, and use CSS grid to place it beside the content on wide screens.
Hide pure repeats such as pull quotes with aria-hidden="true", and never hide focusable content that way.
Label ads, use rel="sponsored noopener", sandbox third-party widgets, and reserve space.
Do not hide essential information in an aside, or use <aside> only for a box on the side.
Use <nav> for menus and <footer> for closing information, not <aside>.

Next, learn how to finish a page or a section, in Footer, or return to the Semantic HTML overview.

HTML Aside Element

What You Will Learn

The Basics

How to bake bread

The Remove-It Test

Two Places an Aside Can Live

1. A page sidebar

2. An aside inside an article or section

How an Aside Is Announced

Try It: Where Does It Go?

How to bake bread

Common Uses

A pull quote

A note or callout

An author bio

Advertisements and sponsored content

A Responsive Sidebar Layout

Accessibility at a Glance

Security and Privacy Notes

Global Audience Notes

Common Mistakes to Avoid

Practice Time

Quick Recap

Key Takeaways

What You Will Learn​

The Basics​

How to bake bread

The Remove-It Test​

Two Places an Aside Can Live​

1. A page sidebar​

2. An aside inside an article or section​

How an Aside Is Announced​

Try It: Where Does It Go?​

How to bake bread

Common Uses​

Related links​

A pull quote​

A note or callout​

An author bio​

Advertisements and sponsored content​

A Responsive Sidebar Layout​

Accessibility at a Glance​

Security and Privacy Notes​

Global Audience Notes​

Common Mistakes to Avoid​

Practice Time​

Quick Recap​

Key Takeaways​

What You Will Learn

The Basics

The Remove-It Test

Two Places an Aside Can Live

1. A page sidebar

2. An aside inside an article or section

How an Aside Is Announced

Try It: Where Does It Go?

Common Uses

Related links

A pull quote

A note or callout

An author bio

Advertisements and sponsored content

A Responsive Sidebar Layout

Accessibility at a Glance

Security and Privacy Notes

Global Audience Notes

Common Mistakes to Avoid

Practice Time

Quick Recap

Key Takeaways