The <aside> Element

The <aside> element defines some content aside from the content it is placed in. This aside content should be related to the surrounding content. Keep in mind that the aside is not a sidebar! It is just "aside" information pertaining to the contents it is grouped with.

<article>
  <h1>My Blog Post</h1>
  <p>This blog post is all about Bimbo. He was so playful and happy to see me when I got home from work. He kept running around in circles and yelping. Wish people at work would react that way when I come to work!</p>
  <aside>
<!-- Since this aside is contained within an article, a parser should understand that the content of this aside is directly related to the article itself. -->
  <h1>Glossary</h1>
    <dl>
      <dt>Bimbo</dt>
      <dd>This is my 3 year old Cocker Spaniel dog.</dd>
    </dl>
  </aside>
</article>
  <aside>
<!-- This aside is outside of the article. Its content is related to the page, but not as closely related to the above article -->
    <h2>Blogroll</h2>
    <ul>
      <li><a href="#">My Friend</a></li>
      <li><a href="#">My Other Friend</a></li>
      <li><a href="#">My Best Friend</a></li>
    </ul>
  </aside>

My Blog Post

This blog post is all about Bimbo. He was so playful and happy to see me when I got home from work. He kept running around in circles and yelping. Wish people at work would react that way when I come to work!

Notice how one aside element is inside the main article, while the second aside element is outside of it.

Back button Table of Contents Next button