Foundation HTML5 with CSS3

Chapter 4

When a header occurs within any sectioning element, such as an article, it acts as the introductory

header for that section of content only. The header in Listing 4-3 introduces the article, featuring the

article’s title in an h1 heading and an author byline marked up as a paragraph.

Listing 4-3. A header element introduces the article

<article>

<header>

<h1>Where Do They Get Those Wonderful Toys?</h1>

<p>By Norm DePlume</p>

</header>

<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>

The header element always requires an end tag and can contain any flow content except a footer

element or another header element.

Required Attributes

The header element doesn’t have any required attributes.

Optional Attributes

There are no optional attributes for the header element.

footer

A counterpart to the header element, the footer element contains additional information about its parent

sectioning element, such as author contact information, copyright or licensing, related links, supplemental

navigation, footnotes, or disclaimers. It typically appears at the end of a section but that’s not a

requirement. Like header, the name “footer” doesn’t necessarily refer to a location—this is footer content

by nature, not just by position.

Listing 4-4 shows the same article again, this time with a proper footer.

Listing 4-4. An article with a footer element, containing a publication date and copyright notice

<article>

<header>

<h1>Where Do They Get Those Wonderful Toys?</h1>

<p>By Norm DePlume</p>

</header>