HTML5: use of aside and article

HTML5 comes with a couple of new elements that actually enhance our websites by allowing us to add more semantics to our page structures. Two interesting elements are aside and article. As their names say, these elements mark up the secondary and the primary content of a page, respectively.

In the old days of HTML and XHTML, we were used to write something like this:

<div id="contents">

    <div class="article"></div>
    <div class="article"></div>
    
    <div id="content-sub"></div>

</div>

In this case, we have two .article elements and a #content-sub element. Instead, with HTML5 we can write:

<div id="contents">

    <article></article>
    <article></article>
    
    <aside></aside>

</div>

By doing so, we get rid of generic div elements and we actually add an extra layer of semantics to our documents.