HTML and CSS Reference
In-Depth Information
Exposing even more structure
There are a couple of reasons you might
want to add more structure to your
pages with
<div>
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.
div id=“header”
h1
div id=“cats”
h2
p
div id=“dogs”
h2
p
So, in the case of PetStorz, we could
take this to the next level and add a few
more
<div>
s…
p
div id=“footer”
p
Adding this str
ucture through <div>
s
can even help y
ou think through you
r
page design. Fo
r instance, does this
lone <p> really
need to be here?
img
div id=“header”
Adding structure on structure
h1
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 “cats” and “dogs”
<div>
s into a “pets”
<div>
.
div id=“pets”
div id=“cats”
h2
p
div id=“dogs”
h2
p
Now we've mark
ed up this HTML so
that we
know there is a
logical section in th
e page
with “pets” con
tent in it. Further,
that “pets”
section has two
logical subsections, o
ne for
“cats” and one f
or “dogs”.
p
div id=“footer”
p
img
