Foundation HTML5 with CSS3

(Steven Felgate) #1
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.
Free download pdf