The Role of `<aside>`: Is it Just a Sidebar?

TL;DR The <aside> tag is often misunderstood as only being useful for creating sidebars, but it's actually a powerful tool for providing supplementary information that enhances the user experience. It represents a piece of content that's related to the main content of a webpage, but not essential to understanding the primary information, and can be used for various purposes such as providing additional context or background information, highlighting supplementary resources, and displaying quotes or testimonials.

The Role of <aside>: Is it Just a Sidebar?

As fullstack developers, we often find ourselves working with HTML elements that have specific purposes, but may not always be used correctly or consistently across different projects. One such element is the <aside> tag, which is often misunderstood as being only useful for creating sidebars. But is that really all it's good for?

In this article, we'll delve into the fundamentals of HTML and explore the true purpose of the <aside> element, its usage in web development, and provide examples of how to use it effectively.

What is an <aside>?

The <aside> element represents a piece of content that is related to the main content of a webpage, but not essential to understanding the primary information. According to the HTML5 specification, an <aside> should contain information that is "tangentially related" to the surrounding content.

In practical terms, this means that an <aside> can be used for a variety of purposes, such as:

• Providing additional context or background information
• Highlighting supplementary resources or tools
• Displaying quotes, testimonials, or other supporting materials

The Difference Between <aside> and Other HTML Elements

Before we dive into examples, it's essential to understand how the <aside> element differs from other similar HTML elements. Here are a few key differences:

• <div> vs <aside>: While both elements can be used as containers for content, a <div> is more generic and doesn't provide any specific semantic meaning, whereas an <aside> explicitly indicates that the content is supplementary.
• <section> vs <aside>: A <section> represents a self-contained piece of related content, whereas an <aside> is specifically intended to provide additional information that is tangentially related to the surrounding content.

Using <aside> in Real-World Scenarios

Now that we've covered the basics, let's look at some examples of how to use the <aside> element effectively:

• Providing Additional Context: Imagine you're building a blog post about a new programming language. You could use an <aside> to provide additional information about the language's history, key features, or notable uses.

<article>
  <h1>Introduction to Rust</h1>
  <p>Rust is a systems programming language...</p>
  <aside>
    <h2>About Rust</h2>
    <p>Rust was first released in 2010 and has since gained popularity for its focus on safety and performance.</p>
  </aside>
</article>

• Highlighting Supplementary Resources: Suppose you're creating a tutorial on web development, and you want to provide additional resources for readers who want to learn more. An <aside> would be perfect for this purpose.

<article>
  <h1>Getting Started with Web Development</h1>
  <p>This tutorial will cover the basics of HTML, CSS, and JavaScript...</p>
  <aside>
    <h2>Additional Resources</h2>
    <ul>
      <li><a href="#">Web Development Bootcamp</a></li>
      <li><a href="#">CSS Tricks Blog</a></li>
      <li><a href="#">JavaScript Tutorials on YouTube</a></li>
    </ul>
  </aside>
</article>

• Displaying Quotes or Testimonials: If you're building a website for a business or organization, you might want to use an <aside> to display quotes or testimonials from satisfied customers.

<article>
  <h1>About Our Company</h1>
  <p>We specialize in providing top-notch web development services...</p>
  <aside>
    <blockquote>
      "We were blown away by the quality of work and attention to detail provided by [Company Name]."
      <cite>— John Doe, CEO of XYZ Corporation</cite>
    </blockquote>
  </aside>
</article>

Conclusion

The <aside> element is more than just a sidebar – it's a powerful tool for providing supplementary information that enhances the user experience. By understanding its purpose and using it effectively, you can create more semantically rich and accessible web applications.

Remember to use the <aside> element judiciously, as overusing it can lead to cluttered and confusing interfaces. With practice and patience, you'll become proficient in leveraging this versatile HTML element to take your web development skills to the next level.

Recommended Books