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.
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>
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.
|Glassy Chat Box Code with Reaction Emojis|
|Dark Neo Brutal Resume Template|
|Bootstrap Timeline with Colorful Lines and Icons|
|Simple Dark Vertical Timeline with Bootstrap|
|Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability|
|Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability|
|Flat Photo Frame Template|
|Cute Photo Frame Template|