HTML5 Guidelines for Web Developers

2.4 Sidebar with “aside” and “section” 25

<h3>

<div>

<a>

</div>

</nav>

</footer>

Figure 2.4 The basic structure of the HTML blog footer

As for CSS, our HTML5 blog’s footer has a few special features. For example, the
entire footer is colored in the same light gray as the page background, and only
the links are formatted with background-color: white. The copyright in the first p
requires float: left, and the navigation text-align: right plus the h3 heading
in the nav block are hidden with display: none. Just why there is an h3 element in
there at all will become clear in section 2.5, The Outline Algorithm. To improve
the style of the links, they are surrounded by div tags. And of course we have
display: block for header and nav, plus a reduction of the width in the footer
element to 79%.

2.4 Sidebar with “aside” and “section”

For areas of a page that are only loosely related to the main content and can there-

fore be seen as rather separate entities, we can use the aside element. In our exam-

ple, it creates a classical sidebar on the right with three blocks for Questionnaire,