The Aside Element



HTML Today, we are going to study the aside element in HTML5. The aside element is used to represent contents that are indirectly related to surrounding content. The content inside the aside element can be considered as independent content.


A simple usage of the aside element is as follows:
<body>
Pets can be good for your mental health.
   <aside>
       <h1>Cat Health</h1>
       Cat kept indoors live longer.
   </aside>
When choosing a pet, try to find one in animal shelters.
</body>


Another usage of the aside element can be to include a sidebar that has a list of related products on a product page, advertisement or a navigation to other similar sites on a blog.

You can also use the aside element to place pull quotes. However, it is not okay to use the aside element to simply quote a statement.

<article>
   Many people show up today in the Jabber Center to check out the new
   line up of cars. There are many types of cars. However, the choices
   for energy saving cars are still few and far in between.
    <aside>
       <q>However, the choices for energy saving cars are still few and far in between. </q>
    </aside>
      The car show will last for two days.

</article>

On a side note, the aside element should not be used to place navigation or links inside an article element.