Foundation HTML5 with CSS3

Chapter 4

tangential content, and don’t get hung up on the name. With CSS, you can position the aside element

anywhere on the page: top, bottom, side, or smack in the middle.

If an aside element appears within an article or other sectioning element, its contents should relate

directly to that article or content section. If an aside appears in the body without another sectioning

ancestor, its contents are assumed to relate to the entire document or to the entire website. By the same

token, if it appears within a section that is itself within an article element, the aside should preferably

relate to that particular section of the article.

In Listing 4-5 we’ve added some supplemental content to the same article, contained in an aside element.

Listing 4-5. Using the aside element in an 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>

<aside>

<p>The historic building at 616 Kirby Ave. was the former

headquarters of Sinnott Inkworks, a leading printer of

comic books in America since 1956.</p>

</aside>

<footer>

<p>Posted on August 9, 2011</p>

<p>© copyright Cape and Cowl Quarterly</p>

</footer>

</article>

There is no default styling for the aside element except to display as a block-level element. It requires an

end tag and can contain any other flow content, including other sectioning elements. An aside element

might even contain a complete article in an article element, with header, footer and section

elements of its own. In theory, that aside article might have an aside of its own, which could also have an

aside, which has an aside, and so on, ad infinitum... but that way lies madness.

Required Attributes

The aside element doesn’t require any attributes.

Optional Attributes

There are no optional attributes for the aside element.