Aside in HTML5

How to create a side panel that is related but not part of the content?

In case we are in the need to keep some content in the side panel that is related with the main content but not part of the content, we can use <aside> tag.

   <aside style="float:left;padding:10px;width:200px;">
        <strong>Aside</strong> <hr />  is the side bar content.
        Looks good. This is the side bar content.
        Looks goodThis is the side bar content.
        Looks goodThis is the side bar content.
        Looks goodThis is the side bar content.
        Looks goodThis is the side bar content.
        Looks goodThis is the side bar content.
        Looks goodThis is the side bar content.
        Looks goodThis is the side bar content.
        Looks goodThis is the side bar content.
    </aside>

    <div>This is a web page that contains many articles that can be re-distributed. This is a web page that contains many articles that can be re-distributed. This is a web page that contains many articles that can be re-distributed. This is a web page that contains many articles that can be re-distributed. This is a web page that contains many articles that can be re-distributed. This is a web page that contains many articles that can be re-distributed.</div>
    <p>Hello, this is the demo of aside element in HTML 5</p>

It is generally used to create left or right panel on the page.

OUTPUT