HTML and CSS Reference
In-Depth Information
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
<div id="content">
<!--[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 
 can improve your experience by enabling JavaScript.</p>
<div class="main">
<aside class="extra">
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 to study
and pick apart at your leisure, or visit and view the page source in your browser.
Listing 10-6. The complete (albeit empty) Power Outfitters template
<!DOCTYPE html>
<html lang="en-US" dir="ltr" id="power-outfitters-com">
<meta charset="utf-8">
<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]>
<script src="js/html5shiv.js"></script>
Search WWH ::

Custom Search