Skip to content
html.sh

<aside> - Aside Element

The <aside> Element

Section titled “The <aside> Element”
Landmark HTML5

The <aside> element represents content that is tangentially related to the main content but could be separated from it. Common uses include sidebars, pull quotes, advertising, groups of navigation elements, and other content that is complementary to the main content but not essential to understanding it.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<aside>
  <!-- Tangentially related content -->
</aside>

Attributes

Section titled “Attributes”

Element-Specific Attributes

Section titled “Element-Specific Attributes”

The <aside> element has no element-specific attributes.

Global Attributes

Section titled “Global Attributes”

This element supports all global attributes.

Common Use Cases

Section titled “Common Use Cases”
Section titled “Sidebar with Related Links”

A sidebar containing related articles or navigation:

Result

Pull Quote

Section titled “Pull Quote”

A highlighted quote from the article:

Result

Author Bio

Section titled “Author Bio”

Author information alongside an article:

Result

Table of Contents

Section titled “Table of Contents”

A table of contents for a long article:

Result

Glossary or Definitions

Section titled “Glossary or Definitions”

Definitions of terms used in the main content:

Result

Advertising Block

Section titled “Advertising Block”

Advertisement or promotional content:

Result

Call-to-Action Box

Section titled “Call-to-Action Box”

A promotional call-to-action related to the content:

Result
Section titled “Related Information Widget”

Social media feeds or related widgets:

Result

Aside Placement and Context

Section titled “Aside Placement and Context”

The meaning of <aside> depends on its context:

<!-- Outside main/article: site-wide sidebar (complementary landmark) -->
<main>
  <article>
    <h1>Main Article</h1>
    <p>Content...</p>
  </article>
</main>


<aside>
  <h2>Site Sidebar</h2>
  <p>Site-wide related content...</p>
</aside>


<!-- Inside article: tangentially related to the article -->
<article>
  <h1>Article Title</h1>
  <p>Main content...</p>


  <aside>
    <h2>Related Note</h2>
    <p>Additional information specific to this article...</p>
  </aside>
</article>


<!-- Multiple asides are allowed -->
<article>
  <h1>Article</h1>


  <aside><!-- Pull quote --></aside>
  <aside><!-- Author bio --></aside>
  <aside><!-- Related links --></aside>
</article>

Best Practices

Section titled “Best Practices”

Ensure Content is Truly Tangential

Section titled “Ensure Content is Truly Tangential”

Use <aside> only for content that is supplementary, not essential:

<!-- Good: Supplementary information -->
<article>
  <h1>How to Bake Bread</h1>
  <p>Follow these steps to bake perfect bread...</p>


  <aside>
    <h2>Quick Tip</h2>
    <p>Use a kitchen scale for more accurate measurements.</p>
  </aside>
</article>


<!-- Wrong: Essential content in aside -->
<article>
  <h1>How to Bake Bread</h1>
  <aside>
    <h2>Ingredients</h2>
    <ul>
      <li>Flour</li>
      <li>Water</li>
    </ul>
  </aside>
  <!-- Ingredients are essential, not tangential -->
</article>

Include a Heading

Section titled “Include a Heading”

Give asides descriptive headings:

<!-- Good: Descriptive heading -->
<aside>
  <h2>Related Articles</h2>
  <nav>...</nav>
</aside>


<!-- Less clear: No heading -->
<aside>
  <nav>...</nav>
</aside>

Label Asides for Accessibility

Section titled “Label Asides for Accessibility”

When you have multiple asides, label them:

<article>
  <h1>Article Title</h1>


  <aside aria-label="Quick reference">
    <h2>Key Points</h2>
    <ul>...</ul>
  </aside>


  <aside aria-label="Additional resources">
    <h2>Further Reading</h2>
    <ul>...</ul>
  </aside>
</article>

Don’t Overuse Aside

Section titled “Don’t Overuse Aside”

Not every sidebar needs to be an <aside>:

<!-- Avoid: Generic navigation that isn't tangentially related -->
<aside>
  <nav aria-label="Primary">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</aside>


<!-- Better: Use nav directly -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>


<!-- Good: Related navigation -->
<article>
  <h1>CSS Tutorial</h1>
  <p>Content...</p>


  <aside>
    <nav aria-label="Related tutorials">
      <h2>More Tutorials</h2>
      <a href="/html">HTML</a>
      <a href="/js">JavaScript</a>
    </nav>
  </aside>
</article>

Accessibility

Section titled “Accessibility”

Complementary Landmark

Section titled “Complementary Landmark”

An <aside> at the page level creates a complementary landmark:

<!-- Creates a complementary landmark -->
<body>
  <main>Main content</main>
  <aside>
    <h2>Sidebar</h2>
    <p>Related content</p>
  </aside>
</body>

Screen readers can navigate to complementary landmarks using shortcuts.

Not a Landmark Inside Sectioning Content

Section titled “Not a Landmark Inside Sectioning Content”

An <aside> inside <article>, <section>, <nav>, or <main> is NOT a landmark:

<article>
  <!-- This aside is NOT a landmark -->
  <aside>
    <p>Pull quote</p>
  </aside>
</article>

Labeling Multiple Asides

Section titled “Labeling Multiple Asides”

When you have multiple asides, provide unique labels:

<aside aria-label="Related articles">
  <h2>You Might Also Like</h2>
  <nav>...</nav>
</aside>


<aside aria-label="Author information">
  <h2>About the Author</h2>
  <p>Bio...</p>
</aside>

Browser Support

Section titled “Browser Support”
BrowserVersion
Chrome5+
Firefox4+
Safari5+
EdgeAll versions
IE9+
Section titled “Related Elements”

Common Mistakes

Section titled “Common Mistakes”

Using Aside for Main Navigation

Section titled “Using Aside for Main Navigation”
<!-- Wrong: Main navigation in aside -->
<aside>
  <nav aria-label="Primary">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</aside>


<!-- Correct: Primary navigation without aside -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

Putting Essential Content in Aside

Section titled “Putting Essential Content in Aside”
<!-- Wrong: Essential recipe steps in aside -->
<article>
  <h1>Chocolate Cake Recipe</h1>
  <aside>
    <h2>Instructions</h2>
    <ol>
      <li>Mix ingredients</li>
      <li>Bake at 350°F</li>
    </ol>
  </aside>
</article>


<!-- Correct: Essential content in main flow -->
<article>
  <h1>Chocolate Cake Recipe</h1>
  <section>
    <h2>Instructions</h2>
    <ol>
      <li>Mix ingredients</li>
      <li>Bake at 350°F</li>
    </ol>
  </section>


  <aside>
    <h2>Chef's Tip</h2>
    <p>For extra moisture, add a tablespoon of coffee.</p>
  </aside>
</article>

Using Aside for Layout Only

Section titled “Using Aside for Layout Only”
<!-- Wrong: Aside just for layout -->
<aside class="column">
  <div>Some content</div>
</aside>
<aside class="column">
  <div>Some content</div>
</aside>


<!-- Correct: Div for non-semantic layout -->
<div class="column">
  <div>Some content</div>
</div>
<div class="column">
  <div>Some content</div>
</div>

Specifications

Section titled “Specifications”