HTML <aside> Tag

An <aside> element contains content that is related to the document‘s main content. It is commonly used for sidebars, call-out boxes, navigation links, product options, and even advertisements.

HTML Tag

Example

#

An <aside> section.
It informs how to make a reservation for a Van Gogh exhibit.

<aside style="width:250px;border-left:3px solid lightblue;padding-left:15px;">
  Here's how you can make reservations
  for the Van Gogh traveling exhibition: 
</aside>

Using <aside>

The <aside> tag defines content that has some relationship with the document's main content.

This element can be used for navigation links, sidebar, call-out boxes, or even advertisements.

On product pages, asides are also used for product options, pricing details, shipping options, and more.

Tip: Use semantic tags, like aside, instead of divs.
They behave just like divs, but they define their content better.

More Examples

The page story on the left is about art classes.
The <aside> section on the right explains how to get there.

Art appreciation classes are
available in these cities:
  • Amsterdam
  • London
  • Paris
  • Rome
  • Berlin
  • New York
  • Houston
  • Los Angeles
<div style="display: flex;">
 <main>
   Art appreciation classes are<br />
   available in these cities: 
   <ul>
     <li>Amsterdam</li>
     <li>London</li>
     <li>Paris</li>
     <li>Rome</li>
     <li>Berlin</li>
     <li>New York</li>
     <li>Houston</li>
     <li>Los Angeles</li>
   </ul>
 </main>
 
 <aside style="margin:80px;padding:20px;border-left:4px solid lightblue;">
   <i>For the cheapest flights<br />
   please contact our travel<br />
   partner KLM.</i>
 </aside>
</div>


Attributes for <aside>

The <aside> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    value Provides the aside element with a unique identifier.
class    classnames Assigns one or more classnames to the aside element.
style    CSS-values Assigns CSS style values to the aside element.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the aside element is hidden.

For additional global attributes see our global attributes list.


Layout Tags

The <aside> tag is part of a group of semantic tags that help with creating the layout of web pages. This group is referred to as the Layout tag group. Together, these tags allow you to create comprehensive page layouts.

An example layout and a list of layout tags below.

HTML Layout
Element Description
<header> Defines a header section on a page or a section of a page
<main> Creates a container for the main content of the page
<footer> Defines a footer section on a page or a section of a page
<nav> Creates a container for navigation links
<aside> Creates a content area that is related to the primary content on a page
<article> Defines a container for independent and self contained text
<section> Defines a piece of content that can stand on its own
<div> Creates a division or section on a page

Note: Layout tags define areas on a page that contain content. By default these tags have no visual appearance, but are often made visible by styling -- for example with a border or background color.

Tip: When appropriate, use semantic tags instead of the generic <div>.

Browser support

Here is when <aside> support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

Guides