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]>
<noscript>
<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>
</noscript>
<![endif]-->
<div class="main">
...
</div>
<aside class="extra">
...
</aside>
</div>
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
<!DOCTYPE html>
<html lang="en-US" dir="ltr" id="power-outfitters-com">
<head>
<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>
