HTML <aside> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 29 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The HTML <aside> element is used to represent a section of a document containing content that is loosely connected to the main content.

It is often used for sidebars, advertisements, related links, or additional information that complements the main topic.

Display: The <aside> element does not have any original styling of its own and does not appear as sidebar by default. You can use CSS to make it appear as sidebar.

Example: 

<main>
    <h1>Main Content</h1>
    <p>A car, also known as an automobile, is a wheeled motor vehicle primarily designed for road use. Most definitions describe cars as having four wheels, seating between one and eight passengers, and being mainly intended for transporting people rather than cargo. There are approximately one billion cars in operation globally.</p>
</main>

<aside>
    <h2>Related Articles</h2>
    <p>The first steam-powered road vehicle was built in 1769 by French inventor Nicolas-Joseph Cugnot.
    </p>
</aside>
Output:

Main Content

A car, also known as an automobile, is a wheeled motor vehicle primarily designed for road use. Most definitions describe cars as having four wheels, seating between one and eight passengers, and being mainly intended for transporting people rather than cargo. There are approximately one billion cars in operation globally.

Example: With CSS 

aside {
    width: 40%;
    padding-left: 0.5rem;
    margin-left: 0.5rem;
    float: right;
}
Output: With CSS

Main Content

A car, also known as an automobile, is a wheeled motor vehicle primarily designed for road use. Most definitions describe cars as having four wheels, seating between one and eight passengers, and being mainly intended for transporting people rather than cargo. There are approximately one billion cars in operation globally.

Cars have controls for driving, parking, passenger comfort, and a variety of lamps. Over the decades, additional features and controls have been added to vehicles, making them progressively more complex. These include rear-reversing cameras, air conditioning, navigation systems, and in-car entertainment.



Tag Omission

The HTML <aside> element must have both start tag and end tag.



ATTRIBUTES

The <aside> element only has global attributes.

Frequently Asked Questions(FAQ)

What is the purpose of the <aside> element in HTML?
The aside element represents a portion of a document whose content is indirectly related to the main content. It's commonly used for sidebars, call-out boxes, or inserts that contain tangentially related information.

Can the <aside> tag be placed within an <article>?
Yes, the <aside> tag can be used within an <article> to include supplementary content like side notes, tips, or related information.

what is the difference between the <aside> and <section> element?
The <section> tag is used for grouping related content, while the <aside> tag is intended for content that is indirectly related or supplementary to the main content.

Should the <aside> element be placed inside or outside the <main> element?
The <aside>

Is it appropriate to use the <aside> element for footnotes or sidenotes within a paragraph?
The <aside> element is intended to hold sections of a page that can stand alone. It's not appropriate for footnotes or sidenotes within a paragraph; other elements or methods should be used for such purposes.

How can I style the <aside> element to appear as a sidebar?
You can use CSS properties like float, width, padding, and background-color to style the <aside> element as a sidebar. 

aside {
    width: 30%;
    padding-left: 15px;
    margin-left: 15px;
    float: right;
    font-style: italic;
    background-color: lightgray;
 }

What are common use cases for the <aside> element?
Common use cases include sidebars with links to related content, advertisements or promotions, brief author bios, quotes, or any content that provides additional context to the main content.