W3docs
en
Log in

HTML <aside> Tag

HTML <aside> tag is used to define additional information related to the content around the aside element.

The <aside> tag is one of the HTML5 elements used to define a section containing content that is tangentially related to the main content. It is generally used to enhance an article with additional information or highlighting parts that can be interesting to the user. Content in aside is a stand-alone, non-essential part of the web page, and if you delete it, the main content will not be affected.

Endnotes, comments, lists of terms, reference information, a collection of links, pull-quotes, etc. are examples of information that can be within the <aside> element.

Tip

Do not confuse the <aside> element with a sidebar. The sidebar is just a visual element, and the <aside> tag doesn’t systematically look like a sidebar.

Danger

Do not use the <aside> element for parenthetical text, as it is intended for tangential content rather than inline or supplementary text within the main flow.

You can use this element for typographical effects for the content that is separated from the main content of the page. For example, it can be used for bibliography, pull quotes, additional information comments and so on.

Syntax

The <aside> tag comes in pairs. The content is written between the opening (<aside>) and closing (</aside>) tags.

Example of the HTML <aside> tag:

HTML <aside> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>I like watching Game of Thrones.</p>
    <aside>
      <h4>Game of Thrones</h4>
      <p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
    </aside>
  </body>
</html>
Try it Yourself »

Result

aside example

Example of the HTML <aside> tag with the HTML <article> tag:

Example of the HTML <aside> tag with the <article> tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the aside tag</h1>
    <aside>
      <h2>Here is some heading</h2>
      <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    </aside>
    <article>
      <h3>Game of Thrones</h3>
      <p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
    </article>
  </body>
</html>
Try it Yourself »

The difference between the <aside> and <div> tags

The <div> element is a generic container with no semantic meaning, while the <aside> element provides semantic meaning by indicating that its content is tangentially related to the main content. This distinction affects accessibility and SEO.

Attributes

The <aside> tag supports the Global Attributes and the Event Attributes.

Example with a global attribute:

<aside class="sidebar-note" id="extra-info">
  <p>Additional context goes here.</p>
</aside>

How to style an HTML <aside> Tag

aside {
  background-color: #f9f9f9;
  border-left: 4px solid #ccc;
  padding: 10px;
}

Practice

Practice

What is the correct usage and characteristics of the HTML <aside> tag according to the article on W3Docs?