HTML <aside> Tag – Side Content
📌 Introduction
The <aside> tag is used for content that is related but not part of the main content.
It is usually placed on the side of a webpage and contains:
- Side notes
- Related links
- Ads
- Tips or extra information
- Author info
🧱 Syntax
<aside>Content here</aside>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Aside Example</title>
</head>
<body>
<main>
<article>
<h2>Learn HTML</h2>
<p>HTML is the structure of web pages.</p>
</article>
</main>
<aside>
<h3>Related Topics</h3>
<ul>
<li>CSS Basics</li>
<li>JavaScript Basics</li>
</ul>
</aside>
</body>
</html>
🖥️ Output Explanation
<main>contains primary content<aside>contains extra related content- The aside is not part of the main flow
🎯 When to Use <aside>
Use it for:
- Related articles
- Side menus
- Ads
- Tips or notes
- Extra links
Example:
<aside>
<p>Tip: Practice HTML daily to improve faster.</p>
</aside>
🧠 Important Concept
👉 <aside> = extra / secondary content
It should:
- Support main content
- But not be essential to understand it
⚖️ <aside> vs <div>
| Tag | Purpose |
|---|---|
<aside> |
Semantic side content |
<div> |
Generic container |
✔ Use <aside> when content is secondary
❌ Don’t use it just for layout without meaning
🧩 Real Website Layout Example
<header>Header</header>
<main>
<article>Main article content</article>
</main>
<aside>
<p>Related posts</p>
</aside>
<footer>Footer</footer>
🎨 Styling Example
<aside style="background:#f4f4f4; padding:10px; width:200px;">
<h3>Tips</h3>
<p>Keep practicing HTML daily.</p>
</aside>
🚫 Common Mistakes
- Putting main content inside
<aside>❌ - Using it for layout only ❌
- Confusing it with
<section>❌
🧪 Mini Exercise
Create a page with:
A
<main>section with an articleAn
<aside>section containing:- Related links
- A small tip box
Style the aside with a different background color