Français

<aside>

Add content you could remove without losing anything

— 1 min read

  • HTML
  • accessibility
  • semantics
  • structure

<aside> — Complementary content

The <aside> element wraps complementary content: callouts, pull quotes, glossary sidebars, ads. The content is related to the context but not essential to understanding the main content.

When to use it

You want to add a sidebar note, a "Did you know?" callout, a list of related links, or a widget that enriches the page without being part of its core.

What you gain

Accessibility: <aside> creates a complementary landmark. Screen readers let users skip it or jump to it directly.

Code example

<main>
  <article>
    <h1>Understanding landmarks</h1>
    <p>Landmarks help users navigate complex pages...</p>
  </article>
  <aside>
    <h2>Related articles</h2>
    <ul>
      <li><a href="/blog/nav">The nav element</a></li>
      <li><a href="/blog/main">The main element</a></li>
    </ul>
  </aside>
</main>

Further reading