24 Chapter 2—Structure and Semantics for Documents
If article elements are nested within each other, the inner article should in prin-
ciple have a theme similar to that of the outer article. One example of this kind of
nesting would be, in our case, adding a subarticle to our blog with comments on
the post concerned.
Regarding styling via CSS, we should mention that article once again requires
display: block, that the content width is reduced to 79% via the surrounding div,
and that this div also neutralizes the logo’s float: left with clear: left. The
italicized author information is the result of the default format of address and is
not created via em. The picture is anchored on the left with float: left, the text is
justified with align: justify, and quotations are integrated using the q element.
One interesting detail is that the quotation marks are not part of the markup but
are automatically added by the browser via the CSS pseudo-elements :before
and :after in accordance with the style rules for the q element. The syntax in CSS
notation once more reflects the markup specification:/* Style rule for the q-element: */
q { display: inline; }
q:before { content: '"'; }
q:after { content: '"'; }2.3 Footer with “footer” and “nav”
In the footer of our HTML blog, we find two other new structural elements: foot-
er 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.
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>