Head First HTML with CSS

nesting divs
Exposing even more structure
There are a couple of reasons you might
want to add more structure to your
pages with s. First, you may
want to further expose the underlying
logical structure of your pages, which
can help others understand them, and
also help in maintaining them. Second,
there are times when you need the
structure so that you have a way to apply
style to a section. Often, you’ll want to
add the structure for both reasons.
So, in the case of PetStorz, we could
take this to the next level and add a few
more s...
Adding structure on structure
436 Chapter 11
Now we’ve added
another with an
id indicating this is the
header of the page.
Adding this structure through s
can even help you think through your
page design. For instance, does this
lone really need to be here?
And you don’t have to stop there. It is
common to nest structure, too. For instance,
in the PetStorz page, we have a cat section
and a dog section, and the two together are
logically the “pets” section of the page. So,
we could place both the “cat” and “dog”
s into a “pets” .
And another indicating
the footer of the page.
Now we’ve marked up this XHTML so that
we know there is a logical section in the page
with “pets” content in it. Further, that “pets”
section has two logical subsections, one for
“cats” and one for “dogs”.
div id=“header”
h1
div id=“cats”
h2
div id=“dogs”
h2
p
p
p
p
div id=“footer”
div id=“header”
p
h1
div id=“pets”
div id=“cats”
p
h2
p
div id=“dogs”
h2
p
div id=“footer”
img
img