Modern HTML: The Aside Element

< aside >

The aside element: not every sidebar

A sectioning element for content that is tangentially related to the content around it. The aside is one of the most under-appreciated elements in modern HTML because its purpose is genuinely subtle. It is not a sidebar, it is not a pull quote, and it is not a "less important" section. It has a specific job in the semantic structure of a document, and when used well, it produces landmarks that make a page navigable for assistive technology.

What `<aside>` actually means

The specification defines aside as content that is tangentially related to the content around it, and which could be considered separate from that content. The key word is tangentially. The content inside an aside should make sense on its own, and the content around the aside should make sense without it.

Two shapes to remember:

Inside the main flow (inside an <article> or similar): a pull quote, a sidebar note, a "related reading" box, a figure with commentary, an author bio attached to a post, an advertisement.
Outside the main flow (as a child of <body> or a top-level layout): a site-wide sidebar with navigation, a persistent secondary area, a "related posts" panel next to the main content.

The same element, two locations. The location determines the meaning.

Why the distinction matters: landmarks

When <aside> is a child of <body> (or a direct child of a sectioning root like <main>), it becomes a complementary landmark, announced by screen readers as "complementary region." Users can jump directly to it through landmark navigation.

When <aside> is nested inside an <article> or another sectioning element, it is not a landmark. It's still semantically meaningful (assistive tech knows it's an aside) but it doesn't appear in the landmark list.

This is deliberate. A complementary landmark is a top-level region of the page. A pull quote inside an article is not; it's part of the article's internal structure. Using <aside> in both places is correct, and the browser and assistive tech interpret it correctly based on context.

Giving asides accessible names

An aside that appears as a landmark should have an accessible name, so it can be distinguished in landmark lists from other complementary regions:

<aside aria-labelledby="related-heading">
  <h2 id="related-heading">Related articles</h2>
  ...
</aside>

Or, when there is no visible heading:

<aside aria-label="Site sidebar">
  ...
</aside>

Pages often have multiple asides, such as a primary sidebar, a "see also" panel, and an ad rail. Naming each makes them individually addressable.

What aside is not

Three common misuses:

Not a styling hook. Using <aside> because it floats to the right by default in some stylesheets is a misuse. Sectioning elements are for meaning, not layout.
Not "less important" content. Aside content is tangentially related, not deprioritized. A quote pulled out for emphasis is as important as the surrounding prose.
Not every sidebar. A sidebar that contains the site's main navigation is a <nav>, not an <aside>. A sidebar that contains the article's table of contents is also a <nav>, usually nested inside the article. An aside is for content that is related but parenthetical, not navigational.

A useful test: if the content were removed, would the surrounding content still be complete? If yes, it's an aside. If the surrounding content becomes incomplete or broken without it, it's part of the main flow, not an aside.

Aside inside article: the pull quote pattern

A pull quote is a short excerpt visually separated from the body of a piece, typically for emphasis or to lure the eye. The semantic form:

<article>
  <h1>The case for paper piecing</h1>
  <p>...</p>
  <aside>
    <blockquote>
      <p>Paper piecing is the most accurate hand-cut technique ever developed for quilters.</p>
    </blockquote>
  </aside>
  <p>...</p>
</article>

The aside wraps the blockquote because the pull quote is tangential to the flow. A reader can skip over it and still follow the argument, and the quoted phrase makes sense on its own.

Aside inside article: the callout pattern

Many documentation and long-form sites use "note," "warning," or "tip" callouts interspersed in the content. These are asides:

<article>
  <p>The pattern above covers the common case.</p>
  <aside class="callout callout-note" aria-label="Implementation note">
    <p>On older browsers that lack `:has()` support, a JavaScript fallback is required for the parent-state selector.</p>
  </aside>
  <p>Continuing from the main pattern...</p>
</article>

Giving the aside a class for styling and an accessible label for semantics keeps the structure clean.

Aside outside article: the sidebar pattern

A site-wide sidebar with author info, recent posts, a newsletter signup, and similar material:

<body>
  <header>...</header>
  <main>
    <article>...</article>
  </main>
  <aside aria-labelledby="sidebar-heading">
    <h2 id="sidebar-heading">About this site</h2>
    <p>...</p>
    <h3>Recent posts</h3>
    <ul>...</ul>
  </aside>
  <footer>...</footer>
</body>

This aside is a complementary landmark. It's sibling to <main>, not inside it. Screen reader users can jump to it with a single keystroke.

Multiple complementary regions on one page are allowed and common. A page might have an aside for "related articles" and a separate aside for "site-wide announcements," both valid, both landmarks, each named distinctly.

Composite patterns where `<aside>` is the right element

Article sidebars, including bios, related reading, and tangential notes.
Pull quotes, wrapping a blockquote with aside when the quote is pulled out for emphasis rather than being quoted in-flow.
Callout boxes, including notes, tips, and warnings in technical documentation.
Site-level secondary regions, including a sidebar with site news, a widget area, or a persistent secondary panel.
Advertisements. Ads are the clearest case of "tangentially related content" and have always been the canonical aside example in the spec.

When to reach for a different element

Main site navigation is <nav>, not <aside>, even if it's visually in a sidebar column.
A table of contents is <nav>, even when it sits in a narrow column beside the content.
A footer with site-wide links is <footer>, not <aside>.
Content that is part of the main argument, just visually offset, is still a <p> or <section>. The visual treatment doesn't change the semantic role.
A modal or dialog is <dialog>, which has entirely different interaction semantics.

Accessibility: an aside is not decorative

Because aside is a sectioning element and, in certain positions, a landmark, it should contain real content with real headings when it stands alone. An aside that is just a row of icons with no text, or a blank container used for styling, produces an empty or unintelligible region for assistive tech. If the content is purely decorative, a <div> is the correct element. Aside carries semantic weight and should not be borrowed for layout.

Reference:

WHATWG: the-aside-element
caniuse.com: mdn-html_elements_aside
MDN Docs: Web/HTML/Element/aside
WAI-ARIA APG: Landmark Regions