As discussed in the box in Section 1.2.4, HTML follows certain rules—these rules are contained in a Document Type Definition file, otherwise known as a DTD. A DTD is an XML document that explains what tags, attributes, and values are valid for a particular type of HTML. And for each version of HTML, there's a corresponding DTD. By now you may be asking, "But what's all this got to do with CSS?"
Everything, if you want your Web pages to appear correctly and consistently in Web browsers. You tell a Web browser which version of HTML or XHTML you're using by including what's called a doctype declaration at the beginning of a Web page. This doctype declaration is the first line in the HTML file and not only defines what version of HTML you're using (such as HTML 4.01 transitional) but also points to the appropriate DTD file out on the Web. When you mistype the doctype declaration, you can throw most browsers into an altered state called quirks mode.
Quirks mode is browser manufacturers' attempts to make their software behave like browsers did circa 1999 (in the Netscape 4 and Internet Explorer 5 days). If a modern browser encounters a page that's missing the correct doctype, then it thinks "Gee, this page must have been written a long time ago, in an HTML editor far, far away. I'll pretend I'm a really old browser and display the page just as one of those buggy old browsers would display it." That's why, without a correct doctype, your lovingly CSS-styled Web pages may not look as they should, according to current standards. If you unwittingly view your Web page in quirks mode when checking it in a browser, you may end up trying to fix display problems that are related to an incorrect doctype and not the incorrect use of HTML or CSS.
Note
For more (read: technical) information on quirks mode, visit http://www.quirksmode.org/index.html?/css/quirksmode.html and http://hsivonen.iki.fi/doctype/.
Fortunately, it's easy to get the doctype correct. All you need to know is what version of HTML you're using. In all likelihood, you're already creating Web pages using HTML 4. You may even have started using XHTML for your Web sites (Section 3.5).
The most popular versions of HTML and XHTML these days are HTML 4.01 Transitional and XHTML 1.0 Transitional. These types of HTML still let you use presentational tags like the <font> tag, thereby providing a transition from older HTML to the newer, stricter types of HTML and XHTML. Although it's best not to use these tags at all, they still work in the Transitional versions, so you can phase out these older tags at your own pace. In the strict versions of HTML and XHTML, some older tags don't work at all.
Note
In general, the strict versions of both HTML and XHTML disallow tags and attributes aimed at making a page look good, like the <font> tag and a paragraph's center attribute. They also disallow a number of once-popular properties like a link's target property, which let you make a link open in a new window.
If you're using HTML 4.01 Transitional, type the following doctype declaration at the very beginning of every page you create:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose.dtd">
The doctype declaration for XHTML 1.0 Transitional is similar, but it points to a different DTD. It's also a good idea to add a little code to the opening <html> tag that identifies the language the page is in, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Note
If you're using frames for your Web pages, then you need to use a doctype intended for framesets. See the W3C site for a list of proper doctypes: http://www.w3.org/QA/2002/04/valid-dtd-list.html.
If this entire discussion is making your head ache and your eyes slowly shut, just make sure you use the proper doctype listed above, and always make it the first line of your HTML file (before even the opening <html> tag). If you want a basic template to use when building either HTML or XHTML pages, visit this book's Web site at http://www.sawmac.com/css/. In fact, it's a good idea to have a blank HTML page with the proper doctype somewhere on your computer, so you can make a copy of it whenever you need to create a new Web page. Using an HTML validator, like the one described in the box in Section 1.2.4, is also a great way to ensure you've typed the doctype declaration correctly.
Note
Most visual Web page tools like Dreamweaver, GoLive, and FrontPage, automatically add a doctype declaration whenever you create a new Web page, and many HTML-savvy text editors have shortcuts for adding doctypes.
Now that your HTML ship is steering in the right direction, it's time to jump into the fun stuff (and the reason you bought this book): Cascading Style Sheets.
Get CSS: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
