Create Sidebars with aside element
Description
The aside element denotes content that is only related to the surrounding element.
This is similar to a sidebar in a book or magazine.
The content has something to do with the rest of the page, article, or section, but it isn't part of the main flow.
Example
The following code adds and styles the aside element.
<!DOCTYPE HTML>
<html>
<head>
<style>
<!-- w w w . j a v a2 s. com-->
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>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">H1</h1>
<h2>H2</h2>
</hgroup>
</header>
<aside>
<h1>Why</h1>
<section>
This is a test:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</section>
</aside>
</article>
</body>
</html>