This chapter is from the book
This chapter is from the book
This chapter is from the book
2.3 Footer with "footer" and "nav"
In the footer of our HTML blog, we find two other new structural elements: footer and nav (see Figure 2.4). The former creates the frame, and the latter provides navigation to other areas of the web page. footer contains additional info on the relevant section, such as who wrote it (as address of course); are there other, related pages; what do we need to look out for (copyright, disclaimer); and so on.
)
Figure 2.4 The basic structure of the HTML blog footer
Unlike the human body, where the head is usually at the top and the foot at the bottom, a footer in a document does not always have to be at the end of the document, but can, for example, also be part of an article element. Not allowed, however, are nested footer elements or a footer within a header or address element.
If you want to create navigation blocks to allow page navigation via jump labels within a document or to external related pages, you can use nav. Just as with footer, nav can appear in other areas of the document as well, as you will see in the section 2.4, Sidebar with "aside" and "section"—the only exception being that you cannot have nav within the address element:
<footer>
<p>
<nav>
<h3>
<div>
<a>
</div>
</nav>
</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%.