The HTML <aside> tag
The HTML <aside> element represents content tangentially related to the main content: sidebars, pull quotes, related links, ad units. At page level it is the complementary landmark. Its content should make sense even if removed.
Overview
The <aside> element holds content that relates to the main flow but could be removed without breaking it: a sidebar of related links, a pull quote, a glossary box, an author bio, or advertising. The quick test: if taking the block away leaves the surrounding content complete and coherent, <aside> is a good fit.
At the page level it is exposed as the complementary landmark. Placed inside an <article>, it represents an aside tied to that specific article: a "related reading" box for that post, say, rather than for the whole site.
One common misuse is worth calling out: <aside> is about meaning, not position. Do not reach for it simply because something sits in a visual sidebar; where an element appears on screen is a job for CSS. Use <aside> only when the content is genuinely tangential to what surrounds it.
Syntax
<aside aria-label="Related">
<h2>Related articles</h2>
<ul>…</ul>
</aside>Example
<aside style="border-left:4px solid #1c7ce9;padding:8px 12px;background:#f5f9ff;">
<strong>Tip:</strong> this is complementary content.
</aside>Best practices
- Use it for genuinely tangential content (related links, pull quotes, ads, glossary boxes), not anything that merely sits in a sidebar.
- Apply the test: if removing the block leaves the main content complete, an aside fits.
- Place an aside inside an <article> when it relates to that article specifically.
- Do not use it for visual side-positioning; that is a job for CSS.
Frequently asked questions
When should I use the aside element?
Is the aside element just for sidebars?
<aside> unless its content is genuinely tangential.What is the complementary landmark?
<aside>, marking complementary content for assistive technology.