The 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.

<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:

<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.

What you have learned

• The aside element can be used within or outside the article element
• When used inside the content of the aside element must be relevant to the article content
• If you can remove the content of the <aside> element and the article content, to which it is relevant, becomes incomplete then you should not be using the <aside> element
• When used outside the article element the content of the aside element must be relevant o your entire web page
• The aside element is a block level element
• You can use both block level elements (such as headings, <h1> - <h6>) and inline elements (such as emphasize, <em>) inside of the <aside> element