HTML and CSS Reference
In-Depth Information
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?”
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