HTML <aside> – Semantic HTML Guide

Introduction

Semantic HTML is all about giving meaning to your content, not just structure. Instead of using generic elements like <div>, semantic tags such as <aside>, <header>, <main>, and <article> clearly describe the role of each section of a webpage.

One of the most important yet often misunderstood semantic elements is the <aside> tag. This tutorial focuses entirely on understanding <aside> — what it is, when to use it, and how it improves accessibility and structure.

What is <aside>?

The <aside> element represents secondary or supplementary content that is related to the main content but not essential to it.

Think of it as:

• Sidebar
• Related links
• Ads
• Extra info
• Author bio
• Tips or notes

Basic Example

<aside>
  <h3>Related Articles</h3>
  <p>Learn more about HTML and CSS basics.</p>
</aside>