HTML Academy · Lesson

aside Complementary Content

Use aside for sidebars and tangentially related content.

aside Complementary Content is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The aside Element

The <aside> element marks content that is tangentially related to the surrounding content:

It can be separated from the main content without losing the main content's meaning
Think: sidebars, call-out boxes, pull quotes, advertising

aside in an Article

Within an article, aside marks info related but not essential to the narrative:

<article>
  <h2>How the Internet Works</h2>
  <p>The Internet is a global network of computers...</p>

  <aside>
    <h3>Did You Know?</h3>
    <p>The first email was sent in 1971 by Ray Tomlinson.</p>
  </aside>

  <p>Data travels in packets across routers...</p>
</article>

Page-Level aside

At the page level, aside is used for sidebars:

<div class="layout">
  <main>
    <article>...</article>
  </main>

  <aside>
    <h2>Related Articles</h2>
    <ul>...</ul>

    <h2>Newsletter</h2>
    <p>Subscribe for updates.</p>
  </aside>
</div>

aside ARIA Role

A page-level <aside> maps to role="complementary":

<aside aria-label="Related resources">
  <h2>Related resources</h2>
  ...
</aside>
<!-- Multiple asides should be uniquely labeled
     Screen reader users can jump directly to complementary regions -->

Pull Quotes with aside

Pull quotes (excerpted quotes for visual impact) can be marked as aside:

<aside class="pullquote">
  <blockquote>
    <p>HTML is the foundation of the web — learn it well.</p>
  </blockquote>
</aside>

Advertising with aside

Ad units in sidebars can be marked as aside:

<aside aria-label="Advertisement">
  <p class="sr-only">Advertisement</p>
  <img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>

aside vs section

Key distinction:

<aside> — tangentially related to main content; supplementary
<section> — thematically part of the main content

aside for Glossary Terms

Use aside to define terms used in an article:

<article>
  <p>The DOM (Document Object Model) is updated when...</p>

  <aside id="dom-def">
    <dl>
      <dt>DOM</dt>
      <dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
    </dl>
  </aside>
</article>

Multiple Sidebar Sections

A sidebar aside can contain multiple independent sections:

<aside aria-label="Sidebar">
  <section>
    <h2>About the Author</h2>
    <p>Jane Smith is a senior web developer...</p>
  </section>
  <section>
    <h2>Popular Posts</h2>
    <ul>...</ul>
  </section>
</aside>

aside Does Not Need a Heading

Unlike section, aside does not strictly require a heading:

<!-- Valid aside without heading: -->
<aside>
  <img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
  <h2 class="sr-only">Promotions</h2>
  <img src="banner.jpg" alt="20% off this week only">
</aside>

aside Not for Tangential Styling

Aside is semantic — do not use it just for visual sidebar layout:

<!-- BAD: aside used for layout only -->
<aside class="right-column">  <!-- no semantic relationship to main content -->
  <div class="ad">...</div>
</aside>

<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>

Quick Check

Which ARIA landmark role does a page-level aside map to?

Recap: aside

aside essentials:

Content tangentially related to surrounding content
Page-level sidebar → complementary landmark
Within article → supplementary info (term definitions, callouts)
Label multiple asides with aria-label
Not for pure layout containers — use div for that

Frequently asked questions

Is the “aside Complementary Content” lesson free?

Yes — the full text of “aside Complementary Content” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “aside Complementary Content”?

Use aside for sidebars and tangentially related content. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “aside Complementary Content” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy