<aside>: sidebars, callouts, related

<aside> is for "related but not essential"

<main>
  <article>
    <h1>Why TypeScript wins</h1>
    <p>The main argument…</p>

    <aside>
      <h2>Related reading</h2>
      <ul>
        <li><a href="/posts/case-against-ts">The case against TS</a></li>
      </ul>
    </aside>
  </article>
</main>

<aside>
  <h2>About the author</h2>
  <p>…</p>
</aside>

Two valid placements:

• Inside an article — content tangentially related to that specific article (a pull quote, related links, an author bio for THAT article).
• At the body level (sibling of <main>) — a site-wide sidebar (recent posts, archive, ad slot, "About this site").

What <aside> is NOT

• It is not "anything on the side of the page." If your sidebar contains primary navigation, use <nav>, not <aside>.
• It is not for footnotes. Use <details> + <summary>, or just an inline <sup>.
• It is not styling-only. If you don't have content the user could skip without losing meaning, use <div> instead.

Screen readers announce <aside> as "complementary landmark" — users with a sidebar that contains primary content (a common mistake) get told it's optional and skip it.