Head First HTML with CSS

understanding nesting by drawing
To understand the nesting
relationships, draw a picture
Drawing the nesting of elements in a Web
page is kind of like drawing a family tree. At
the top you’ve got the great-grandparents,
and then all their children and grandchildren
below. Here’s an example...
has two nested
elements: and .
You can call them both
“children” of .
is nested within the
element.
110 Chapter 3
is always the
element at the root of
the tree.
head body
title
Simple Web page.
html
p
q
Musings
To quote Buckaroo,
The only reason
for time is so
that everything
doesn’t happen
at once.
Let’s translate this into
a diagram, where each
element becomes a box, and
each line connects the element
to another element that is nested
within it.
is nested within the
element, so we say is the “child”
of .
The parent of is ,
the parent of is , the
parent of is .