- Beginner Recipe: Building an HTML5 Starter Document
- Where Do All the New Elements Come From?
- Beginner Recipe: Using the header Element to Create a Site Header
- Beginner Recipe: Using the hgroup Element to Group Headings
- Beginner Recipe: Creating Navigation with the nav Element
- Intermediate Recipe: Using the New article Element
- Intermediate Recipe: Grouping Content with the section Element
- Beginner Recipe: Creating a Sidebar with the aside Element
- Beginner Recipe: Using the footer Element
- Intermediate Recipe: Using the HTML5 Outliner to Ensure the Correct Structure
- Advanced Recipe: Using All the New Elements to Build a News Page
- Advanced Recipe: Using All the New Elements to Build a Search Results Page
- Summary
This chapter is from the book
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.
){kind=link}
)
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>