<aside> for SideBar
The aside element marks the surrounding elements. It could be some additional background, a set of links to related articles, and so on.
Using aside to Mark Up a "Related Links" Section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This has a nice outline</title>
<style>
article, aside, nav {display: block;}
article, aside {float: left;}
article {width: 500px;}
nav {width: 250px;}
</style>
</head>
<body>
<article>
<header>
<h1>10 things about HTML5</h1>
</header>
<p><strong>Pellentesque habitant morbi tristique</strong> </p>
</article>
<aside>
<h2>Related links</h2>
<nav>
<ul>
<li><a href="#">HTML4</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
</aside>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
article {border: thin black solid; padding: 10px; margin-bottom: 5px}
aside {
width:40%;
background:white;
float:right;
border: thick solid black;
margin-left: 5px;
}
aside > section { padding: 5px;}
aside > h1 {background: white; color: black; text-align:center}
</style>
</head>
<body>
<header>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#">a link</a></li>
<li><a href="#">a link</a></li>
</ul>
</nav>
</header>
<article>
<header>
<hgroup>
<h1>H1</h1>
<h2>H2</h2>
</hgroup>
</header>
<aside>
<h1>Sidebar H1</h1>
<section>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</section>
</aside>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<section>
<h1>H1</h1>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<section>
<h1>H1</h1>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
</section>
</section>
<footer>
<nav>
More Information:
<a href="">Link</a>
</nav>
</footer>
</article>
</body>
</html>