HTML Aside Content Tutorial - Using the Aside Element

Understanding HTML Aside Content

The HTML <aside> element represents content that is related to the surrounding content but is not part of its main flow.

Aside content can include supporting information, related links, side notes, background details, or other material that adds context without being essential to understanding the primary content.

The <aside> Element

The <aside> element represents content that is indirectly related to the content around it. The page or article should still make sense if the aside were removed.

<aside>
  <h2>Related Information</h2>
  <p>Additional background information about this topic.</p>
</aside>

The relationship between the aside and the surrounding content is what gives the element its semantic meaning.

Common Aside Content

The <aside> element can be used for several types of supplementary content when that content relates to the surrounding document.

Related links or recommended reading.
Background information.
Side notes and explanations.
Definitions or supporting facts.
Author information related to an article.
Related products, tutorials, or resources.

The key idea is that the content supports the main topic without becoming part of the primary discussion itself.

Aside with an Article

An <aside> can appear inside an <article> when the supplementary content relates specifically to that article.

<article>
  <h1>Learning Semantic HTML</h1>

  <p>Semantic elements describe the purpose of webpage content.</p>

  <aside>
    <h2>Did You Know?</h2>
    <p>Semantic HTML can also improve navigation for assistive technologies.</p>
  </aside>

  <p>The main article continues here...</p>
</article>

In this example, the aside provides useful supporting information, but the article would still make sense without it.

Page-Level Aside

An <aside> can also appear outside an article when the supplementary content relates to the page more broadly.

<main>
  <article>
    <h1>HTML Tutorial</h1>
    <p>Main tutorial content...</p>
  </article>

  <aside>
    <h2>Related Tutorials</h2>
    <ul>
      <li><a href="/html5/tutorials/semantic/navigation.html">HTML Navigation</a></li>
      <li><a href="/html5/tutorials/semantic/main-content.html">HTML Main Content</a></li>
    </ul>
  </aside>
</main>

Here, the aside relates to the overall tutorial page rather than to a single paragraph or section within the article.

An <aside> is not simply a semantic name for anything displayed in a sidebar. Sidebar describes a visual position, while aside describes the relationship of the content to the surrounding document.

A sidebar might contain an <aside>, navigation, advertising, filters, tools, or other content. Likewise, an <aside> can appear above, below, or within the main content instead of beside it.

<aside> vs <section>

The <aside> and <section> elements both group content, but they describe different relationships.

Use <section> when the content forms a meaningful part of the main topic.
Use <aside> when the content is supplementary or indirectly related to the main topic.

<section>
  <h2>HTML Accessibility</h2>
  <p>Accessibility is an important part of writing good HTML.</p>
</section>

<aside>
  <h2>Related Resource</h2>
  <p>See the accessibility checklist for additional guidance.</p>
</aside>

The section belongs directly to the page's subject, while the aside provides supporting information related to it.

Semantic Meaning vs Visual Position

The meaning of <aside> does not depend on where it appears on the screen. CSS can place aside content beside the main content on large screens and below it on smaller screens without changing its semantic purpose.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

The layout is controlled by CSS, while the HTML continues to identify the aside as supplementary content.

HTML Aside Example

The following example demonstrates an article with related supporting information in an <aside>. Experiment by moving the aside inside or outside the article and consider whether its relationship to the surrounding content changes.

Play in Editor

Aside Content Best Practices

Use <aside> for content that is related to the surrounding content but not essential to its main flow.
Make sure the main content still makes sense if the aside is removed.
Do not use <aside> simply because an element appears visually in a sidebar.
Place an aside inside an article when it relates specifically to that article.
Place an aside at a broader page level when its content relates to the page as a whole.
Use a heading when it helps identify the subject of the aside.
Use CSS to control where the aside appears visually.

Summary

The HTML <aside> element represents supplementary content that is related to the surrounding document without being part of its primary flow. Common examples include side notes, related links, background information, and supporting resources.

An aside can belong to an individual article or to the page more broadly. Its semantic meaning comes from its relationship to the surrounding content, not from whether it is visually displayed as a sidebar.

HTML Aside Content