HTML and CSS Reference
Figure 2-2. The browser sees the page as a hierarchical structure based on the HTML tags
The family tree analogy is also applied to the relationship between HTML elements. At the top of the
family tree in Figure 2-2 is the <html> element, which is known as the root element . Next come the <head> and
<body> elements, which are the <html> element's children or child elements . Because they're at the same level
of the family tree, the <head> and <body> elements are considered siblings . Further down the family tree, the
<h1> and <p> elements are also siblings, but they're children of the <body> element and descendants of the
<html> element. The relationship also works the other way—the <body> element is the parent of the <h1> and
<p> elements. At the bottom level of Figure 2-2 , the <dfn> and <abbr> elements have id and title attributes
respectively. Going back up the family tree, all elements in the same branch are the ancestors of the <dfn> and
The browser uses the DOM as a roadmap to apply styles in accordance with the selector associated with
each style rule. You create selectors using the tag and attribute names in various combinations, frequently
reflecting the family-tree relationship of different elements. Consequently, it's important not only to have a clear
understanding of the DOM, but also to ensure that your HTML is well constructed. If elements are incorrectly
nested, the browser is likely to have difficulty reading the roadmap, and your page might not be styled the way
you expected. Also, if your markup is overly complex, the browser will have difficulty navigating the DOM. Even if
it renders your styles correctly, your pages are likely to load more slowly.
■ if your styles aren't working the way you expect, always check your HTMl markup using the W3C validation
service at http://validator.w3.org/ . invalid HTMl is one of the main causes of problems with Css.
The Importance of the DOCTYPE
The first line of the HTML markup in Listing 2-1 looks like this:
This is the HTML5 DOCTYPE preamble, which is required to ensure that the browser renders your styles
correctly. The DOCTYPE is case-insensitive, so you can use <!DOCTYPE html> or any other combination of
uppercase and lowercase.
If you are using HTML 4.01 or XHTML 1.0, you should use one of the following versions of the DOCTYPE :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"