This chapter is from the book
This chapter is from the book
This chapter is from the book
2.4 Sidebar with "aside" and "section"
For areas of a page that are only loosely related to the main content and can therefore be seen as rather separate entities, we can use the aside element. In our example, it creates a classical sidebar on the right with three blocks for Questionnaire, Login, and Quick Links. If the link list is implemented as nav, as is to be expected, the two first blocks are embedded in another new element: section.
The section element contains sections of a document that are thematically connected, for example, chapters of an essay or individual tabs of a page constructed from tabs, typically with a heading. If section is used within footer, it is usually used for appendices, indices, license agreements, or the like. Generally, it makes sense to use section if it belonged in a table of contents as well. In our example, as shown in Figure 2.5, the Questionnaire and the Login are tagged with section, and the links are tagged as nav as mentioned earlier:
<aside>
<h2>
<section>
<h3><p><input>
</section>
<section>
<h3><label><input>
</section>
<nav>
<h3><ul><li><a>
</nav>
</aside>
)
Figure 2.5 The basic structure of the HMTL5 blog sidebar
For the same reason as with the nav block in the footer (see the following section), the sidebar contains a heading h2 directly before the first Questionnaire block, hidden via CSS with display: none. The sidebar format is float: right with width: 20% and font-size: 0.9em. The striking feature of the sidebar is the rounded bottom-right corner, which means it's time to admit that the HTML5 blog also uses CSS3: The rounded corner is only one of two features used. The CSS syntax for the class rounded-bottom-right looks like this:
.rounded-bottom-right {
-moz-border-radius: 0px 0px 20px 0px;
-webkit-border-radius: 0px 0px 20px 0px;
border-radius: 0px 0px 20px 0px;
}
The second feature is responsible for the subtle shadow of the four areas and is defined as follows in the CSS file:
.shadow {
-moz-box-shadow: 4px 0px 10px -3px silver;
-webkit-box-shadow: 4px 0px 10px -3px silver;
box-shadow: 4px 0px 10px -3px silver;
}
The tripling of the CSS command through the prefixes -moz-* and -webkit-* is conspicuous; it is caused by the fact that CSS3 is not yet in the Candidate Recommendation phase. Once it enters this stage of the standardization process, only then will it be ensured that border-radius and box-shadow will no longer be changed. Until then, the prefixes are maintained to show that the implementation could still contain small deviations from the standard.