HTML and CSS Reference
In-Depth Information
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
<section class="new-item">
<h2>Brand New Item!</h2>
<div class="product">
<a class="url" href="/gear/exotics/AR7111-bionic-eye">
<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>
</a>
<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>
</div>
</section>
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
class
attribute.
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.
