HTML and CSS Reference
promote a brand new product in the Power Outfitters catalog. We'll wrap that box in a section element
because it forms a distinct part of the home page and it deserves its own title. We're using an h2 here,
even though section begins a new sectioning root and we could justifiably use an h1 . An h2 will preserve
the overall hierarchy of the document and play nicer with current devices that haven't yet implemented
HTML5's outlining algorithm.
Listing 10-8. The New Item box on the Power Outfitters home page
<h2>Brand New Item!</h2>
<a class="url" href="/gear/exotics/AR7111-bionic-eye">
<img class="product-img" src="images/products/l-ar7111-bionic-eye.jpg"
alt="An electronic eye with green iris" width="300" height="225">
<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>
<p><b class="price">$23,299</b> (each)</p>
<p><button class="cart-add" type="submit" name="product"
value="AR7111-bionic-eye" form="cart">Add to Cart</button></p>
A Modular Sidebar
The sidebar is contained in an aside element that indicates its contents are supplemental to the rest of the
document, and it could even be removed without harming the meaning of the main content. Within that
containing aside we can use whatever elements are appropriate for the content at hand, which will vary
from page to page. We know the sidebar needs to be flexible and changeable because we've planned
ahead for that. Each sidebar block needs to be a self-contained unit, a reusable module that we can easily
add, remove, and rearrange to suit the needs of each page.
The Power Outfitters home page sidebar shows the latest news from the Power Outfitters blog, as well as
a “Deal of the Day” promoting a special discount. We'll form distinct blocks for these two sidebar modules
by containing each in a section element; they're sections of their parent aside element. Each section
gets a “module” class as well as another class more descriptive of what that module does; remember that
a single element can belong to any number of classes, with each class name separated by spaces in the
You can see our home page sidebar in Listing 10-9. Note that we've reused the product markup pattern for
the Deal of the Day box.