Home > Articles > Web Development > HTML/CSS

This chapter is from the book

This chapter is from the book

Beginner Recipe: Creating a Sidebar with the aside Element

The aside element is for a group of content that is "tangentially" related to its surrounding content, such as a list of most popular posts, blog categories, or recent comments. This type of content is related to the main page content, but it is also separate from it.

In current web development, it is common for there to be a "sidebar" on the page. This does not necessarily mean it is physically on the side of the page, but it often contains things such as related links or a list of categories. The correct use of the aside depends on where you put it: If it is inside an article, the aside content should tangentially relate to the article content, such as a glossary. Or if the aside is outside an article or a section, its contents must be related to the page, such as related links, the site owner's Twitter feed, or ads relating to the site. Listing 1.10 shows how to create a "related links" section, as displayed in Figure 1.9.

Figure 1.9

Figure 1.9 Basic layout of a page with a "sidebar"

Listing 1.10. 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="#">10 things about HTML4</a></li>
      <li><a href="#">10 things about CSS3</a></li>
      <li><a href="#">10 things about JavaScript</a></li>
    </ul>
</nav>
</aside>
</body>
</html>

You can also nest the aside inside other elements, including the article element. Extending the previous example, you could provide the user with a glossary covering various phrases or content used in the main content that might not be known to the user:

<article>
  <header>
    <h1>10 things about HTML5</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
ultricies mi vitae est. Mauris placerat eleifend leo.</p>
....
  </header>
  <aside>
    <h2>Glossary</ h2>
    <p>We have probably used lots of acronyms and abbreviations on this page, so here is the glossary</h2>
    ....
  </aside>

</article>
  • + Share This
  • 🔖 Save To Your Account