0
0
HTMLmarkup~5 mins

Aside element in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The <aside> element is used to show content related to the main part of the page but separate from it. It helps organize extra information clearly.

To add a sidebar with related links or notes next to an article.
To show author information or a biography beside a blog post.
To display advertisements or promotions related to the main content.
To include a glossary or definitions related to the main text.
To add a list of related articles or references on a news page.
Syntax
HTML
<aside>
  <!-- Related content here -->
</aside>
The <aside> element should contain content related but separate from the main content.
It is a semantic element, meaning it helps browsers and screen readers understand the page structure.
Examples
An aside with a list of related articles next to the main content.
HTML
<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">How to Grow Plants</a></li>
    <li><a href="#">Gardening Tips</a></li>
  </ul>
</aside>
An aside showing author information beside a blog post.
HTML
<aside>
  <p>Author: Jane Doe</p>
  <p>Contact: jane@example.com</p>
</aside>
Sample Program

This example shows a main article with an <aside> on the side containing related article links. The aside has a light background and is separated visually.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aside Element Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 2rem;
      display: flex;
      gap: 2rem;
    }
    main {
      flex: 3;
    }
    aside {
      flex: 1;
      background-color: #f0f0f0;
      padding: 1rem;
      border-radius: 0.5rem;
    }
    a {
      color: #0066cc;
      text-decoration: none;
    }
    a:hover, a:focus {
      text-decoration: underline;
      outline: none;
    }
  </style>
</head>
<body>
  <main>
    <h1>Welcome to My Gardening Blog</h1>
    <p>Here you will find tips and tricks to help your plants grow healthy and strong.</p>
  </main>
  <aside aria-label="Related articles">
    <h2>Related Articles</h2>
    <ul>
      <li><a href="#">How to Grow Tomatoes</a></li>
      <li><a href="#">Best Soil for Flowers</a></li>
      <li><a href="#">Watering Tips</a></li>
    </ul>
  </aside>
</body>
</html>
OutputSuccess
Important Notes
Use aria-label on <aside> to describe its purpose for screen readers.
The <aside> can be placed inside or outside <article> depending on the content relationship.
Styling with CSS helps visually separate the aside from main content but keep it related.
Summary
The <aside> element holds related but separate content.
It helps organize pages and improve accessibility.
Use it for sidebars, notes, or related links.