Chapter 3
This dilemma inspired the introduction of the doctype switch. When a document includes a correct
doctype, a modern browser will assume the entire document is well formed and authored according to web
standards. The browser can then render the page in a mode intended to comply with the established
standards for markup and CSS, a mode known as compliance mode or strict mode. If the doctype is
missing, incomplete, or malformed, the browser will assume it’s dealing with an outdated or badly made
website and revert to a looser and more tolerant rendering mode, known as quirks mode because it’s
intended to adjust to the various quirks of nonstandard and improperly constructed markup (it’s also
sometimes called compatibility mode). Very old browsers lack a doctype switching mechanism and are
forever locked in their outdated quirks modes.
To invoke standards compliance mode in modern web browsers, a complete doctype must be the very first
line of text in a document; only white space is allowed to appear before it. Any unexpected text or code
appearing before the doctype declaration will throw most modern browsers into quirks mode, with often-
unpredictable results. Designing websites with CSS is considerably easier and the results are more
consistent when you invoke compliance mode. Hence, including a correct doctype is essential. And
because a doctype is already a required part of a valid document, modern browsers will always render
your pages in compliance mode if you build your documents correctly.
Peter-Paul Koch offers additional information and opinions on quirks mode at his
appropriately named website, Quirks Mode (quirksmode.org/css/quirksmode.html).
For a breakdown of just how browsers render documents differently in their quirks
modes, check out Jukka Korpela’s article “What Happens in Quirks Mode?”
(www.cs.tut.fi/~jkorpela/quirks-mode.html).
The Root Element: html
After the doctype, the rest of the document is entirely contained in a single html element. This is also
called the root element because it’s the starting point for the document tree, and all other elements in the
document branch off from the html element that contains them. The root element can only have one head
and one body element as its direct children (both covered in this chapter) and every other element
descends from one of those two. You can choose to omit the html element’s start and end tags and the
browser will simply generate them itself when it renders the document; the html element is always there
because the doctype implies its existence.
However, it’s still generally a good idea to include the root element’s start and end tags in your markup,
especially because the start tag can carry attributes. The lang and dir internationalization attributes are
optional, but you should usually include them with the html element. The Web is a globe-spanning,
borderless nation that speaks many languages—all of them, in fact. Declaring the natural language of your
content can assist browsers in parsing and rendering it, especially if the browser and operating system are
localized for a different language.
Listing 3-2 shows an HTML document with an html element that includes the lang and dir attributes,
indicating that this page is written in American English (lang="en-US") and should be read (and rendered)
from left to right (dir="ltr"). These are global attributes, as we mentioned in Chapter 2, so they can
