The aside element represents content that is indirectly related to the rest of the web page’s content and that can be viewed independently of it. This element can be used, for example, for sidebars, ad blocks, navigation element blocks, various plugins like twitter or facebook, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aside Element in HTML5</title>
</head>
<body>
<div style="width: 850px;">
<article style="float:left; width:500px;">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae placerat purus. Quisque dui augue,
accumsan quis sem blandit, mattis luctus arcu. Mauris non magna et est tristique ornare. </p>
</article>
<aside style="float:right; width:300px;">
<h2>Aside Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae placerat purus. Quisque dui augue,
accumsan quis sem blandit, mattis luctus arcu. Mauris non magna et est tristique ornare. </p>
</aside>
</div>
</body>
</html>
Here, the content of the aside block is rather indirectly related to the main content from the article element. Therefore, we can place all this content in aside.