HTML and CSS Reference
In-Depth Information
We've
draw
n an
outlin
e
of th
e Pet
Stor
z pag
e.
Let's explore how we can divide
a page into logical sections
Take a look at the web page to the right: it's a web
page for PetStorz.com, and we're going to spend a
few pages looking at how we might add some more
structure to it by identifying some logical sections and
then enclosing those inside a
<div>
element.
h1
h2
p
h2
p
p
But by just focusin
g on the structure of the page,
you can't really tel
l a whole lot about the page.
What elements mak
e up the header? Is there a
footer on the page
? What are the content areas?
p
img
Identifying your logical sections
Okay, so our job is to locate “logical sections”
in this page. What's a logical section? It's just
a group of elements that are all related on the
page. For instance, in the PetStorz.com web
page, there are some elements that are used for
the cats area on the page, and some that are
used for dogs. Let's check it out.
h1
h2
p
T
he Pe
tStorz
page
has t
wo ma
in cont
ent
h2
a
reas,
one fo
r cats
, and o
ne fo
r dogs
. It
h
as som
e oth
er are
as too
, but
we'll c
ome
b
ack t
o thos
e.
p
p
p
img
