How to Use the aside Element — Group Supporting Information

The aside element groups information that supports the page's main topic or gives related background. Examples include a cooking tip that helps with a recipe or background information related to an article.

The short answer

A small example

<main>
  <h1>How to Make Curry</h1>
  <p>Cut the vegetables, cook them in a pot, then add the curry roux.</p>
  <aside aria-labelledby="spice-note-title">
    <h2 id="spice-note-title">A Note About Spices</h2>
    <p>For a stronger aroma, warm a small amount of spice first.</p>
  </aside>
</main>

The spice note supports the cooking steps but is not itself one of the steps. aria-labelledby connects the visible heading to the aside as its name. This can help people find the content when a browser or assistive technology lists page landmarks.

Meaning does not depend on visual position

The meaning of aside comes from its content, not where CSS places it on the screen. Supporting information can appear below or inside the main text. A box at the side that has no meaningful connection to the main content is not automatically an aside.

Keep a restatement of the main point, or a parenthetical phrase that belongs in a sentence, in the main flow. The HTML Standard says a parenthetical alone is not an appropriate use of aside.

How it differs from section and figure

Element	What it represents	A useful question
aside	A group of related information that supports the main content	Can this be read separately as supporting information?
section	A group of content about one topic on the page	Is this a topic in the structure of the main text, with a heading?
figure	A self-contained figure, image, code example, or similar item	Does this item need an optional caption?
div	A group with no special meaning	Do I only need a group for styling or a script?

A key diagram in an article may use figure. A separate note that helps explain the article may use aside.

How might a screen reader find it?

Depending on its place in the page, a browser may expose an aside as a “complementary” landmark in the Accessibility Tree, the page information shared with assistive technology. Inside elements such as article or section, the role can depend on whether the aside has a name.

Not every aside needs a name for screen readers. First decide whether it should appear as a landmark. If it should, connect a visible heading with aria-labelledby. A heading by itself does not always become the aside's name.

Common mistakes

• Do not use aside for every box placed beside the main text.
• Writing aside does not automatically create a side-by-side layout or a collapsible panel.
• Keep a short note in the main text when it is part of the sentence's flow.
• If you are unsure, decide from the relationship between the extra content and the main text.

Explore the Atlas page

For the role in each nesting context, naming conditions, and the browser and WPT checks, see the Yugien Atlas page about the aside element. Related topics include article, section, and figure.