HTML and CSS Reference
again we'll use the old reliable div to generate a generic box and symbolically link our two content blocks.
This time we'll give it an ID to identify the container because, let's face it, we might really need a more
specific selector in our CSS at some point, so having that ID may still come in handy (we promise to use it
wisely and sparingly).
Listing 10-5 shows our completed content area with the wrapper div and two inner blocks, a div and an
aside . We've also added our noscript notice for IE users into the content area, rather than letting it run
loose in the body .
Listing 10-5. The template's content area
<!--[if lt IE 9]>
<p class="notice"><strong>Note:</strong> This website employs some features
that may not be fully supported by some versions of Internet Explorer. You
The Complete Template
After all this structural and semantic plotting, Listing 10-6 presents our completed site template, ready to fill
in with useful content. You can download all of this topic's source code at foundationhtml.com to study
and pick apart at your leisure, or visit power-outfitters.com and view the page source in your browser.
Listing 10-6. The complete (albeit empty) Power Outfitters template
<html lang="en-US" dir="ltr" id="power-outfitters-com">
<meta name="robots" content="index, follow">
<meta name="keywords" content="capes, masks, tights, superhero, costumes, gadgets">
<meta name="description" content="Power Outfitters manufactures and sells costumes,
accessories, supplies, and equipment for the contemporary costumed crime-fighter">
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
<!--[if lt IE 9]>