0%

<aside> Aside

Content related to the main content but set apart from it, such as a sidebar.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<aside> holds content that relates to what is around it without belonging to the main flow. Sidebars, related links, glossary boxes, pull quotes and ads are typical.

At page level it is the complementary landmark. Inside an article it should relate to that article. Pick it for what the content means. Something that merely sits in a side column is not automatically an aside.

The aside element in the HTML Living Standard (opens in a new tab) uses pull quotes, sidebars and advertising as examples. Practise it in the Article, Section, Aside lesson.

Syntax

<aside>
  <h2>Related</h2>
  <p>Extra content</p>
</aside>

When to use it

An aside holds content a reader could skip without missing the point: a "related posts" list, a glossary box, an author bio beside an article, a pull quote, a sponsor block, a newsletter sign-up next to the main text. Ask yourself whether the main content would still be complete without it.

Notes the reader must not miss, such as a safety warning in a recipe, stay in the main flow, perhaps as a <p> with a class. A block of site links is a <nav>, and it may sit inside an aside if the sidebar also holds other things. An image with a caption is a figure.

Source order counts here. On phones the sidebar usually drops below the content, yet if it comes first in the HTML, screen reader and keyboard users meet it before the article on every device. Put the aside after the main content in the source and let CSS place it visually.

Live example

Edit the code and watch the preview.

<article>
  <h2>Visiting Rome</h2>
  <p>Rome has thousands of years of history.</p>
  <aside>
    <h3>Did you know?</h3>
    <p>Rome has more than 900 churches.</p>
  </aside>
</article>

More examples

Sidebar next to the main content

The aside comes after the article in the source, so keyboard and screen reader users reach the main text first. Inline-block CSS places it beside the article on wide screens, and its aria-label names the complementary landmark.

<style>
.content{display:inline-block;vertical-align:top;width:62%;margin-right:4%}
.side{display:inline-block;vertical-align:top;width:30%;background:#f4f4f4;padding:8px}
</style>
<article class="content">
  <h1>Visiting the mountains</h1>
  <img src="mountains.svg" alt="Snowy peaks above a valley" width="300" height="150">
  <p>Start early: the paths get busy after ten.</p>
</article>
<aside class="side" aria-label="Related">
  <h2>Related trips</h2>
  <p><a href="lakes.html">Three quiet lakes</a></p>
</aside>

Pull quote in an article

A pull quote repeats a striking line from the text to catch the eye. Because it duplicates content that is already in the article, it is tangential and fits an aside. CSS gives it a large, centered style.

<style>
.pull{font-size:1.4em;font-style:italic;text-align:center;border-top:2px solid #c0392b;border-bottom:2px solid #c0392b;margin:16px 10%}
</style>
<article>
  <h1>The baker who never sleeps</h1>
  <p>Marco starts at 3am. "Bread does not wait for anyone," he says, shaping the first loaves.</p>
  <aside class="pull">
    <p>Bread does not wait for anyone.</p>
  </aside>
  <p>By 7am the shelves are full and the first customers arrive.</p>
</article>

Tip: Use aside for related, separate content; a side column alone is no reason.

Browser support

The aside element was introduced with HTML5 and works in all modern browsers. An aside placed directly in the body or in main is exposed as the complementary landmark; inside an article or section, browsers expose it as complementary only when it has an accessible name, so add aria-label when that matters.

Accessibility

Two or more asides on a page each need their own aria-label, otherwise the complementary landmarks sound identical. The W3C ARIA landmarks guidance (opens in a new tab) shows how to label complementary regions.

Common mistakes

Wrong

<aside>
  <p>This paragraph is part of the main argument.</p>
</aside>

Right

<p>This paragraph is part of the main argument.</p>
<aside><p>Fun fact: ...</p></aside>

aside is for side material. Content the page cannot do without stays in the main flow.

Frequently asked questions

What is the aside tag used for?

For content that relates to what surrounds it but stands apart, so the main content still reads fine if you delete the <aside>. Sidebars, pull quotes, glossary boxes, author bios, related links and advertising are the usual suspects. At the top level browsers expose it as a complementary landmark.

Is aside the same as a sidebar?

Often, but not always. Plenty of sidebars are asides, yet the element is defined by meaning. A note box halfway down an article is a perfectly valid <aside>, while a sidebar holding the main site navigation should be a <nav>. Where the aside shows up on screen is a CSS decision. Our semantic HTML guide compares it with section and article.

Practise it

Related sections elements

<header>Introductory content: the site logo and navigation, or the top of an article.<nav>Wraps the major navigation links.<main>The page's unique, central content. One per page.<footer>Closing content for a page or section, like copyright, contacts and related links.<article>Self-contained content that makes sense alone, such as a post, card or comment.<section>A themed group of content, normally with its own heading.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h3>A subsection heading inside an h2 section.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.