HTML5 aside tag

The aside element is new to HTML5 and it can be used in two different contexts. Basically, the context of the <aside> element is based on whether or not it inside or outside the article element.

In magazines you often see info-boxes pulled away from the actual content of the article, highlighting something with relevance to the article such as pull-quotes and when this is the scope of your aside element then it has to be placed inside the article element, because it has a relationship to the content of the article.

CONTENT RELATED TO THE CURRENT ARTICLE, BLOGPOST, ETC.

Here is an example of the <aside> element being used inside the <article> element.

Try this example

<article>

        <header>

                <h1>All About Flour<h1>

                <p class="byline">by Jane Doe</p> 

        </header>

        <section>

                <h2>The Two Types of Wheat</h2>

                <p>There … to rise.</p>

                <p>Where … with less protein.</p>

        </section>

        <aside>

                If you use organic flour you very often get better bread

        </aside>

</article>

CONTENT RELATED TO YOUR PAGE AS A WHOLE

The aside element can also be used to mark up content which is relevant to your page as a whole – containing blogrolls, additional navigation, even adds – and when this is the scope of your <aside> element it has to be placed outside of the article section. Here is an example:

Try this example

<aside>

        <h3>Foodblogs I like</h3>

        <a href="http://www.bakerella.com">Bakerella</a>

        <a href="http://sourdough.com/"> Sourdough.com</a>

        <a href="http://www.bakingobsession.com">BakingObsession</a>

</aside>

<article>

        <header>

                <h1>All About Flour<h1>

                <p class="byline">by Jane Doe</p> 

        </header>

        <section>

                <h2>The Two Types of Wheat</h2>

                <p>There … to rise.</p>

                <p>Where … with less protein.</p>

        </section>

</article>

Whether you use the aside element for the former or the latter use, you need to remember that the aside element is for secondary content regardless of the visual design of this content. This also implies that the aside element should be used for e.g. pullquotes as they are a part of your content - you should not use the blockquote element.