Using Aside for Supplementary Content

If you’ve ever read an article with a little “tip” box on the side, or a fun fact in the margin, you’ve already seen the idea behind the HTML <aside> element.

In this beginner-friendly guide, you’ll learn what <aside> is, when to use it, and how to add it to your own web pages. We’ll walk through simple, practical examples and explain every step in plain language.

By the end, you’ll be able to:

Recognize when supplementary content is a good fit for <aside>
Add <aside> elements to a basic HTML page
Style your asides so they stand out and help your readers

What is the `<aside>` Element?

The <aside> element is an HTML tag used for supplementary content. That means content that is related to the main content, but not essential to understanding it.

Examples of good uses for <aside>:

A short author bio next to a blog post
A “Did you know?” box with extra facts
A list of related articles or links
A small note, warning, or tip beside a tutorial

Think of <aside> as a “side note” to your main content.

Important: You should not put your main content inside <aside>. Only use it for extra information.

Basic Page Without `<aside>`

Let’s start with a very simple HTML page that doesn’t use <aside> yet.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First Article</title>
</head>
<body>
  <h1>How to Brew a Great Cup of Tea</h1>

  <p>Brewing a great cup of tea is simple once you know a few basics. In this guide, you'll learn how to choose your tea, heat your water, and steep it for the right amount of time.</p>

  <h2>Step 1: Choose Your Tea</h2>
  <p>Start by picking a tea you enjoy, such as black, green, or herbal tea. Each type has a different flavor and ideal brewing time.</p>
</body>
</html>

Right now, everything in this page is main content. There’s nothing special on the side.

Step 1: Adding a Simple `<aside>`

Now let’s add a small “Did you know?” box using <aside>.

We’ll put it near the paragraph where we talk about choosing tea.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First Article</title>
</head>
<body>
  <h1>How to Brew a Great Cup of Tea</h1>

  <p>Brewing a great cup of tea is simple once you know a few basics. In this guide, you'll learn how to choose your tea, heat your water, and steep it for the right amount of time.</p>

  <h2>Step 1: Choose Your Tea</h2>
  <p>Start by picking a tea you enjoy, such as black, green, or herbal tea. Each type has a different flavor and ideal brewing time.</p>

  <aside>
    <h3>Did you know?</h3>
    <p>Green tea is usually brewed at a lower temperature than black tea to avoid a bitter taste.</p>
  </aside>
</body>
</html>

What’s Happening Here?

<aside>: Tells the browser (and assistive technologies, like screen readers) that this is extra, related information.
<h3> inside the aside: Gives the box a small heading, so readers know what it is.
<p> inside the aside: Contains the extra fact.

Result:

In most browsers, this will just appear as a block of content under the section. It may not look like a special side box yet, but structurally, it’s now marked as supplementary.

Try it yourself

Copy the code into a file called tea.html.
Open it in your browser (double-click the file).
Try changing the text inside <aside> to your own fun fact.

Step 2: Styling Your `<aside>` So It Stands Out

Right now, the <aside> looks like a normal paragraph. Let’s use a bit of CSS (the language for styling web pages) to make it look like a note or callout box.

We’ll add a <style> section inside <head>.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First Article</title>

  <style>
    /* Style the aside box */
    aside {
      border-left: 4px solid #4caf50; /* green line on the left */
      padding: 10px 15px;             /* space inside the box */
      margin: 15px 0;                 /* space around the box */
      background-color: #f5fff5;      /* very light green background */
      font-size: 0.95rem;             /* slightly smaller text */
    }

    aside h3 {
      margin-top: 0;                  /* remove extra space at the top */
      font-size: 1.05rem;             /* make the heading a bit bigger */
    }
  </style>
</head>
<body>
  <h1>How to Brew a Great Cup of Tea</h1>

  <p>Brewing a great cup of tea is simple once you know a few basics. In this guide, you'll learn how to choose your tea, heat your water, and steep it for the right amount of time.</p>

  <h2>Step 1: Choose Your Tea</h2>
  <p>Start by picking a tea you enjoy, such as black, green, or herbal tea. Each type has a different flavor and ideal brewing time.</p>

  <aside>
    <h3>Did you know?</h3>
    <p>Green tea is usually brewed at a lower temperature than black tea to avoid a bitter taste.</p>
  </aside>
</body>
</html>

Result:

Now your aside looks like a highlighted note. The green border and light background help readers see it as extra but useful information.

Try it yourself

Change the border color (for example, #2196f3 for blue).
Change the background color to a very light yellow or blue.
Increase the padding to make the box bigger.

You’re already doing real front-end development—nice work.

Step 3: Using `<aside>` for Related Links

Another common use of <aside> is to show related links. For example, after your article, you might want to suggest other pages to read.

Let’s add a second <aside> at the bottom with related articles.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First Article</title>

  <style>
    aside {
      border-left: 4px solid #4caf50;
      padding: 10px 15px;
      margin: 15px 0;
      background-color: #f5fff5;
    }

    aside h3 {
      margin-top: 0;
    }
  </style>
</head>
<body>
  <h1>How to Brew a Great Cup of Tea</h1>

  <p>Brewing a great cup of tea is simple once you know a few basics. In this guide, you'll learn how to choose your tea, heat your water, and steep it for the right amount of time.</p>

  <h2>Step 1: Choose Your Tea</h2>
  <p>Start by picking a tea you enjoy, such as black, green, or herbal tea. Each type has a different flavor and ideal brewing time.</p>

  <aside>
    <h3>Did you know?</h3>
    <p>Green tea is usually brewed at a lower temperature than black tea to avoid a bitter taste.</p>
  </aside>

  <h2>Step 2: Heat the Water</h2>
  <p>Heat your water to the right temperature for your tea. Boiling water is good for black tea, but too hot for most green teas.</p>

  <!-- New aside with related links -->
  <aside>
    <h3>Related articles</h3>
    <ul>
      <li><a href="#">How to Store Tea Leaves</a></li>
      <li><a href="#">Understanding Water Temperature</a></li>
      <li><a href="#">Tea Accessories for Beginners</a></li>
    </ul>
  </aside>
</body>
</html>

What’s Happening Here?

We reused the same aside styles, so both boxes look consistent.
The second <aside> contains a heading and a list of links.
These links are related to the article but not required to understand it.

This is a clear, correct use of <aside> as supplementary content.

Try it yourself

Add your own link titles.
Create another <aside> with “Bonus tips” or “Common mistakes to avoid.”

Step 4: Where to Place `<aside>`

You might be wondering: Does <aside> always have to be on the side visually?

No. The name suggests “side content,” but:

It can appear inside your main content area.
It can appear before, after, or between sections.

What matters is the meaning, not the exact position:

If the content is extra, related, and skippable, it’s a good candidate for <aside>.
If readers must read it to understand the article, it should stay in the main flow (not in an aside).

Common Mistakes to Avoid

Putting main content in <aside>
If your page doesn’t make sense without the content, don’t put it in an aside.
Using <aside> just for styling
Don’t choose <aside> only because you want a pretty box. You can style any element with CSS. Use <aside> when the content really is supplementary.
Forgetting headings
A small heading (like <h3>Tip or Note) helps readers understand what the aside is for.

Quick Recap & What’s Next

You’ve just learned how to:

Understand the purpose of the <aside> element
Add simple supplementary content, like tips and fun facts
Style your asides with basic CSS to make them stand out
Use <aside> for related links and extra reading

Learning HTML is a journey, and every new tag you master makes your pages clearer and more helpful. Today you added structure and meaning to your content, not just style.

Next steps you can take:

Create a new HTML page on any topic you like (movies, recipes, hobbies).
Write a short article and add at least two <aside> sections: one for a tip, another for related links.
Experiment with different colors and borders in CSS.

Keep experimenting and celebrating each small win—you’re building real web pages, one element at a time.

Mudzinga