<aside>

<aside> contains content indirectly related to its surroundings, such as a glossary note or related reading. Important instructions required to understand the main text belong in the main content.

A named supplementary note

The visible heading names this aside through aria-labelledby. Its placement beneath the article here is a design choice, not an element requirement.

<main>
  <h1>Choosing a layout</h1>
  <p>Grid aligns content across rows and columns.</p>
  <aside aria-labelledby="note-title">
    <h2 id="note-title">Related concept: gaps</h2>
    <p>
      A gap separates neighboring tracks without adding space outside the grid.
    </p>
  </aside>
</main>

aside {
  border-left: 3px solid #2563eb;
  padding-left: 1rem;
}

Semantics and placement

An aside accepts flow content. It does not float or become a sidebar automatically. Style it with CSS after deciding whether the content is actually supplementary.

Its accessibility role depends on context: a top-level aside acts as a complementary landmark; an unnamed aside nested in sectioning content can be generic. A useful visible heading and associated name help readers distinguish supplementary regions. Avoid many unnamed or redundant landmarks.

Alternatives

Use nav for a major navigation block, section for a thematic part of the main explanation, and div for a purely visual wrapper. Do not hide essential warnings in a region readers might skip.

Sources and browser support

MDN: aside describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.