Constructing Content - HTML5 with CSS3 - page 73

letter, a review, a poem, a short story, or indeed an article. Listing 4-2 shows an example of a short, self-
contained article, complete with title, author byline, and date.
Listing 4-2. The article element containing a complete (if short) article
<article>
<h1>Where Do They Get Those Wonderful Toys?</h1>
<p>By Norm DePlume</p>
<p>Power Outfitters Superhero Costume and Supply Company is
located in a nondescript building on Kirby Ave, a site that
once housed a large printing plant. Behind their modest
storefront is an expansive warehouse positively packed to
the portholes with paraphernalia.</p>
<p>Posted on August 9, 2011</p>
</article>
Like the section element, article requires an end tag and is styled as a block-level element by default.
It can contain any flow elements, including other sectioning elements. When an article element contains
other article elements, the inner article s are still self-contained in their own right, but are also related
to (and part of) the outer article that contains them. For example, an advice column that consists of
letters from readers and responses from the author—the entire column could be wrapped in an article
element and each reader letter wrapped in a nested article element of its own.
Required Attributes
There are no required attributes for the article element.
Optional Attributes
The article element doesn't offer any optional attributes.
header
The header element contains introductory or navigational content for a section of a document. It typically
appears at the top of a section, but it doesn't have to; calling it a “header” might imply a position at the top,
but it's an introduction to the section, and can actually appear anywhere within that section (also note that
a “section of content” doesn't necessarily mean a section element). Even so, it makes plain sense that
introductions usually come first. You can use CSS to position a header anywhere on the page you like.
The term “header” also commonly refers to a website's overall masthead—where you would usually find
the name and logo of the website, some navigation links, perhaps a search form, and so on. If the header
element's closest sectioning ancestor is the document's body , and it isn't a descendant of some other
sectioning element, the header applies to the entire document and so it might be a suitable element for
such a masthead.