HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <aside> Tag

Definition and Usage

The <aside> tag in HTML is used to define content that is indirectly related to the content surrounding it. It can be placed within various sections of a webpage and typically represents information that is supplementary to the main content. This could include side notes, references, or additional information that enhances the understanding of the main content.

Example: Displaying Content Aside from the Main Content

Sponsored by Google

Here’s an example of how you can use the <aside> tag to display content that is separate from the main content:

  <p>This is additional information that complements the main content.</p>

Styling the <aside> Element with CSS

You can use CSS to style the <aside> element. Here’s an example:

<!DOCTYPE html>
aside {
  width: 25%;
  padding-left: 10px;
  margin-left: 10px;
  float: left;
  font-style: normal;
  background-color: #f0f0f0;
  border: 1px solid #ccc;

<h1>Exploring the Natural History Museum</h1>

<p>Last weekend, my friends and I explored the Natural History Museum. The exhibits were fascinating, and we learned a lot about our planet's history!</p>

<p>The Natural History Museum is renowned for its collections of dinosaur skeletons, minerals, and meteorites. It offers a glimpse into the Earth's past and the evolution of life.</p>

<p>We were particularly impressed by the dinosaur exhibit. The life-sized models were breathtaking, and the information provided was both educational and engaging.</p>
<p>The mineral section was equally captivating, with a wide array of colorful gems and rare stones on display. We spent hours exploring and left with a newfound appreciation for our world's natural wonders.</p>


Run the code below


This example demonstrates how the <aside> element can be used to provide additional information related to the main content, enhancing the overall understanding of the topic.

Browser Support

Here’s a table showing the browser support for the <aside> element:

Browser Version
Chrome 6.0
Firefox 9.0
Safari 4.0
Opera 5.0
Edge 11.1

Global Attributes

The <aside> tag also supports the Global Attributes in HTML, such as class, id, style, title, lang, and data-*.

Event Attributes

The <aside> tag also supports the Event Attributes in HTML, such as onclick, onmouseover, onmouseout, onkeydown, and onload.


The <aside> tag is a versatile and useful element in HTML that allows web developers to include supplementary content that enhances the user experience. By understanding how to use and style this element, you can create more engaging and informative web pages.