HTML and CSS Reference
In-Depth Information
Setting Up the Document
Unless you've skipped the previous nine chapters, you know by now that behind every web page is an
HTML document (if you want to avoid more spoilers, go back and read Chapter 3). To begin construction
on the Power Outfitters site we'll establish a base document with all the vital metadata we're going to
need. Listing 10-1 is our starting point, just a bare skeleton of a document.
Listing 10-1.
The blank document we'll be starting out with
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<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">
<title>Power Outfitters - Superhero Costume & Supply Co.</title>
</head>
<body class="home">
</body>
</html>
We've naturally included an HTML5 doctype, and we've declared the language (American English) and
direction (left to right) on the root
html
element. The document's header also contains some additional
metadata for search engine robots. We're concentrating on the home page in this example, so the
keywords and description here apply to the entire website, and any interior pages would carry descriptions
more relevant to that particular page. And of course we've given the page a descriptive and meaningful
title in the required
title
element.
We've also taken the liberty of adding a
class
attribute to the
body
element, classifying this page as the
home page, just in case we need to refer to that when we start writing the CSS. We could perhaps use an
id
attribute to serve the same purpose—distinguishing the home page from other pages—but because
this is mostly intended as a hook for CSS rules, we'd rather avoid the higher specificity of an ID selector.
Speaking of CSS, we should go ahead and add links to our external style sheets: one with styles for
regular screen display, and another for print. These style sheets are blank for the moment, but we'll be
building them up soon enough. We'll keep all of our CSS files in a “
css
” folder on the server and we're
using relative URLs to point to those files:
<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">
We know we'll be using many of the new semantic and interactive elements introduced in HTML5, and we
know we'll need to style them with CSS, and that raises the issue of element rendering in Internet
Explorer. As we mentioned in Chapter 4, older versions of IE won't apply any styling to elements they don't
recognize unless those elements are first injected into the document object model (DOM) with a bit of
