For example,
in the markup, you can see that the body tag contains (or nests)
all the other tags. You can also see that the div tag (with the ID of
"header") contains two tags: an image tag and a head 3 tag.
Dreamweaver??™s Code View will
automatically indent nested tags as
shown above (Commands > Apply
Source Formatting) to help you see
the hierarchy more clearly.
XHTML: GIVING STRUCTURE TO CONTENT 25
FIGURE 1. 5 shows a conceptual
way to represent a document??™s
structure??”with a hierarchy diagram.
body
div
img h3
When examining this hierarchical view (Figure 1.5), we can say
that both the img tag and the h3 tag are the children of the div tag,
because it is the containing element of both. In turn, the div tag is
the parent tag of both of them, and the img tag and the h3 tag are
siblings of one another because they both have the same parent tag.
Finally, the body tag is an ancestor tag of the img and h3 tags, because
they are indirectly descended from it. In the same way, the img and
h3 tags (and the div, for that matter) are descendants of the body tag.
To quote Sly Stone: ???It??™s a family affair??¦???
In CSS, you write a kind of shorthand based on these relationships,
for example
div#header img {some CSS styling in here}
Such a CSS rule only targets img tags inside of (descended from) the
div with the ID of "header" (the # is the CSS symbol for an ID).
Pages:
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56