HTML and CSS Reference
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.
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?
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.
T he Pe tStorz page has t wo ma in cont ent
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.