Putting it All Together - HTML5 with CSS3 - page 343

heading) and the description (a paragraph) act as the caption for the figure image so they're both wrapped
in a nested figcaption element. Now the image illustrates the product, the text describes the image, and
everybody wins.
You can see our product figure so far in Listing 10-7. Giving each piece a meaningful class not only offers
us a set of style hooks for the CSS we'll add later, but also describes the function and purpose of each
part. These classes will be even more valuable when we reuse the same markup pattern elsewhere.
Listing 10-7. A figure element for a product image, including a name and description in a figcaption
<figure>
<img class="product-img" src="images/products/l-ar7111-bionic-eye.jpg" 
alt="An electronic eye with green iris" width="300" height="225">
<figcaption>
<h3 class="name">AR7111 Bionic Eye</h3>
<p class="description">See into the far reaches! Processes electromagnetic
frequencies beyond ordinary human vision directly into your brain. Installed
in a simple outpatient procedure.</p>
</figcaption>
</figure>
There's more to add, but before we get too much further, we'll wrap our entire product in a container with
the class “product.” That container element may change in different situations; it could be a section , an
aside , a list item, or even a table cell, but we'll use a plain div in this example.
Both the image and the product name should act as links to a page with more detail about that product.
We can kill both of those birds with one stone by wrapping the entire figure in a single a element (making
the description part of the link as well). This would have been impossible in HTML4 or XHTML, not least
because the figure element didn't exist in those versions, but it was previously invalid for an inline a
element to contain a block-level heading element. We would have been forced to link those two elements
separately, leaving us with two links leading to the same destination (or else we'd need to find some other
way to structure our content to avoid redundancy, such as nesting the image inside the heading). HTML5
has done away with the old “inline” and “block-level” content models, and now allows links to contain a
much wider variety of content.
The price will appear outside the link, and we'll use a b element to make the text stand out but without
adding the emphasis a strong or em element would imply; we want the price to be distinctive and
noteworthy, but not necessarily more important than the content around it.
The “Add to Cart” button will be a button element with a product code as its value, and we'll associate it
with the cart form that we built into the masthead (see, we told you it would be useful later). In HTML4 or
XHTML, form-associated elements had to reside within their parent form element. We would have had to
repeat a new form element for every cart button on the page, or else wrap the entire page in one big form.
HTML5 and the new form attribute means any form-associated interactive element can relate directly to a
form element elsewhere in the document. Clicking one of these buttons passes along its specific value to
a single cart form for processing.
Listing 10-8 finally shows our finished product box, and we'll follow this same markup pattern wherever we
need to display a product on the Power Outfitters site. This product box appears on the home page to