Example 1-1 shows the DOCTYPE declaration we'll be using in all examples in this tutorial:
The DOCTYPE declaration for XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd">
Look a little weird? Not to worry. I'll go through it with you so you have a firm understanding of what each bit of this declaration means. First, there's the opening <!, which many readers who have looked at HTML before might wonder about. The angle bracket is a familiar component in HTML, but the exclamation mark appears in only one other situation with HTML: in comments, which you'll also learn about in this tutorial. This symbol isn't used too often because it's SGML syntax being used in the context of HTML. Here, it simply means that a declaration is about to begin. This is then followed by the term DOCTYPE, which states that this code is declaring the document type.
The next bit is html, which defines this document type as being written in HTML. Note that it's in lower case here. This is significant because we're using XHTMLand because XHTML is case sensitive, this particular part of the declaration must be in lower case. If it's not, your document will not validate. The word PUBLIC is an important piece of information. This means that the particular document type being referenced is a public document. Many companies create unique versions of XHTML, with customized elements and attributes. For our purposes, the public version of HTML that we're going to use is absolutely sufficient.
The ensuing syntax "-//W3C//DTD XHTML 1.0 Transitional//EN" defines the host of the document's language type and version (The World Wide Web Consortium, W3C), and states that the document is being written according to the XHTML 1.0 Transitional Document Type Definition (DTD). A DTD is simply a long laundry list of allowed elements and attributes for that language and language version. Finally, there's a complete URL that goes to the DTD, http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd. If you were to load this into your browser, you'd see the actual DTD, for XHTML 1.0 Transitional (see Figure 1-1).
A portion of the XHTML Transitional DTD.
With this declaration at the top of your document, you will be able to author the document and then run it through a validator to check for conformance. The validator uses the information in the declaration and compares your document to the DTD you've declared. If you've followed the rules allowed in the DTD you've declared here, you should have no errors whatsoever, which is, of course, our goal.
QUANTUM LEAP
Due to discrepancies in the way that many browsers were handling various aspects of HTML and CSS, a means of gaining better performance for those documents written to specification became evident. Tantek Celik, then a developer for Microsoft, created a switching mechanism in IE that corrected numerous problems. This switch uses properly formed DOCTYPE declarations to switch the browser from "quirks" mode (the forgiving mode I described in this tutorial's introduction) to "compliance" mode, which allows sites written in compliant markup and CSS to perform much more efficiently. One important point: Never place anything above a DOCTYPE declaration, or you might end up with browser display issues.
To learn more about DOCTYPE switching, see http://gutfeldt.ch/matthias/articles/doctypeswitch.html. There's also a great chart there showing numerous declarations and which ones actually flip the switch. XHTML 1.0 Transitional with a proper DOCTYPE as shown in this section was chosen also because it performs this function.
Although DOCTYPE declarations are never displayed, their necessity is inarguable. Using these properly, you can't go wrong: You'll have valid pages that are also interpreted by the browser in as optimal of a situation as possible.