The aside element
Additional information related to the main content can be defined using the <aside> HTML element. The content within the aside element should be related to the main content but if it was deleted it wouldn’t impact the understanding of the article.
Often the aside element is seen as a way of defining a sidebar but it can be used in a range of cases. A sidebar is a visual element which typically is to the left or right of the content but you could use the aside element in a range of places on the page. Examples of content you could include are:
- endnotes
- list of terms
- a collection of related links
- pull quotes
How to use the aside element
Using this element is straightforward. You start with the opening tag (<aside>) and place your additional content after the opening tag and then close the aside tag (</aside>). Here’s an example:
<aside>
<h3>Did you know?</h1>
<p>Coding has over 700 languages.</p>
</aside>You could use a div element instead of an aside as they will have the same behaviour but by using the aside element it adds more semantic meaning to the web page. The W3 HTML5 guidance says that the aside element:
…represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
Tangentially means that the content is different from or not directly connected with something that you were talking about or doing before.
The aside tag does not have unique attributes but does support all Global Attributes in HTML. The tag is supported on all browsers.
More HTML tutorials
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects