HTML and CSS Reference
In-Depth Information
html
head
body
meta
title
h1
p
dfn
id
abbr
title
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
<abbr>
elements.
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
Tip
The Importance of the DOCTYPE
The first line of the HTML markup in Listing 2-1 looks like this:
<!doctype html>
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"
"http://www.w3.org/TR/html4/loose.dtd">
<!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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
