HTML Academy · Lesson

aside Complementary Content

Use aside for sidebars and tangentially related content.

Lesson 1 of 413 steps

aside Complementary Content is a free HTML Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

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

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

Frequently Asked Questions

Is the “aside Complementary Content” lesson free?

Yes — any 3 lessons of the HTML Academy learning path, including “aside Complementary Content”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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