This chapter is from the book
This chapter is from the book
This chapter is from the book
2.2 Content with "article"
The article element represents an independent area within a web page, for example, news, blog entries, or similar content. In our case the content of the blog entry consists of such an article element combined with an img element to liven things up, an h2 heading for the headline, a time and address element for the date it was created and the copyright, plus three paragraphs in which you can also see q and cite elements for quotations of the protagonists.
Because the content element is now lacking, although it ranked right at the top in web page analyses by Google and Opera, it did not make it into HTML5 for some reason. Our blog entry is embedded in a surrounding div (see Figure 2.3). So nothing stands in the way of adding further articles:
<div>
<article>
<img>
<h2>
<address>
<time>
</article>
</div>
)
Figure 2.3 The basic structure of the HTML5 blog content
By definition, the address element contains contact information, which incidentally does not, as is often wrongly assumed, refer only to the postal address, but simply means information about the contact, such as name, company, and position. For addresses, the specification recommends using p. The address element applies to the closest article element; if there is none, it applies to the whole document. The time element behaves in a similar way in relation to its attributes pubdate and datetime, which form the timestamp for our document. You will find details on this in section 2.7.2, The "time" Element.
If article elements are nested within each other, the inner article should in principle 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: '"'; }