Building Great Markup | The Zen of CSS Design(c) Visual Enlightenment for the Web

There is no one-size-fits-all solution for building a document because every page is different and will therefore have different structural needs. But there are some general guidelines to keep in mind when constructing your own HTML.

Use a DOCTYPE

Beginning your markup with a DOCTYPE (short for Document Type) identifies the markup language you're using to browsers and other user agents. No matter which language you choose, starting with a DOCTYPE is the first step toward healthy markup.

Example:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Note

For a more in-depth look into the separation of structure from presentation, see Roger Johansson's white paper "Developing with Web Standards," at 456 Berea Street (www.456bereastreet.com/dwws).

Specify a Language/Character Set

Just as important as including a DOCTYPE is tagging your document with a human language. If you've ever stumbled across a page full of gibberish that was actually meant to be Japanese, Greek, Swahili, or otherwise, you've probably experienced what happens when the document author has forgotten to set the encoding. Because Google and other search engines will filter results differently based on the language of a search request, proper encoding pays off if you want search engine traffic. We'll explore character encoding in more depth later in this chapter.

Examples:

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

Sets the document's XML language, in this case the ISO code for English, en.

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Assigns a character set to the document, in this case UTF-8.

Note

For a more in-depth look at issues surrounding DOCTYPE usage, see Jeffrey Zeldman's article "Fix Your Site with the Right DOCTYPE," on A List Apart (www.alistapart.com/articles/doctype).

Title It

Every page needs a descriptive <title> element. They're saved as link descriptions in a viewer's browser when your page is bookmarked, and search engines consider keywords within a page title more authoritativeand therefore give them a nice ranking boost in many instances. Each page within a site deserves its own unique title, if possiblethey should be descriptive and relevant to the individual page, instead of generic across the whole site.

Example:

 <title>css Zen Garden: The Beauty in CSS Design</title>

Use the Proper Elements

We've already touched on this, but it bears repeating: Mark up your document with HTML elements that describe the structure of your content, not how it looks. Use a p for paragraphs, not for line breaks. Use a blockquote for blocks of quoted text, not for indents. And so on.

Of course, not every HTML element has survived in XHTML 1.0 Strict. In fact, the list of elements you can use in the latter (and XHTML 1.1) is smaller but more focused. If there is no element that matches the structure you're attempting to create, it's time to think about using the all-purpose div or span elements. But there's a caveat ... keep reading.

Example:

 <h3>The Road to Enlightenment</h3>

and not:

 <code style="font-size: 1.5em;">The Road to Enlightenment</code>

Note

A complete list of elements included in XHTML 1.0 is available at W3School's "XHTML 1.0 Reference" (http://w3schools.com/xhtml/xhtml_reference.asp).

Avoid div-itis

The danger when using div and span elements is in going overboard. A few of them placed in strategic spots can greatly enhance the inherent structure of a document; too many, and you may wish to question whether there's a more appropriate HTML element you should be using. For example, a div should never be used where an h3 would make more sense, and a span should never replace a label.

But that doesn't mean they should be avoided. A few divs in logical spots throughout your document will provide extra styling control and logical separation of sections. Think of a div as a reusable container: You don't want to bury your content in too many containers, but a few well-placed divs can keep content sorted well.

Example:

 <div >    <h1>css Zen Garden</h1>    <h2>The Beauty of <acronym title="Cascading Style Sheets">CSS</    acronym> Design</h2> </div>

Minimize Markup

Implied in the previous two tips is that less markup is betterit is. Assuming that you've built a solid structure, reducing markup bloat should be a universal goal. Use only the elements that are needed, and trim the rest. Not only will file sizes be smallerand downloads therefore quickerbut a browser will spend less time interpreting the final file and get it onscreen faster.

Example:

 <p>The Zen Garden aims to excite, inspire, and encourage participation.</p>

and not

 <div>   <p><span >The Zen Garden aims to excite, inspire, and   encourage participation.</span></p> </div>

Use class and id Appropriately

Adding identifying attributes to various elements allows you to hook into them later with CSS and JavaScript. A class is a reusable attribute that may be applied to any element on a page, while an id is a unique attribute that may be used only once per page.

You can apply more than one class to an element, and apply a class more than once across a page. You can apply both a class and an id to a single element, but remember that using more than one instance of the same id within a page is invalid. Alphanumeric characters (a-z, A-Z, 0-9) can be used in both class and id names, but neither may start with a number. And even though some browsers are forgiving, it's wise to consider both case-sensitive, for ease of debugging.

Three examples of valid identifiers:

 <body > <p > <div  >

Two examples of invalid identifiers:

 <span > <div ><div >