Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <aside> Tag

The <aside> tag defines content related to the page's main content.

It's used for call-out boxes, sidebar, advertisements, and more.

On product pages, asides contain product options, shipping info, etc.

Example

#

An <aside> tag with additional information about the main topic.

<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>

More Examples

The main 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, they 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 possible, use semantic tags, like <aside>, instead of the generic <div>. They behave the same, but specify their content better.

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


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides