HTML and CSS Reference
In-Depth Information
Q:
So, a <div> acts like a container
that you can put elements into to keep
them all together?
A:
It sure does. In fact, we often describe
<div>s as “containers.” Not only do they act
as logical containers that you can use to hold
a bunch of related elements (like the “cat”
elements) together, but when we start styling
<div>s and using them for positioning in the
next chapter, you'll see they act as graphical
containers, too.
Q:
Beyond the structure I'm already
putting into my pages with headings and
paragraphs and so on, should I also be
adding a higher level of structure with
<div>s?
A:
Yes and no. You want to add structure
where it has a real purpose, but don't add
structure for structure's sake. Always keep
your structure as simple as possible to get
the job done. For instance,
Q:
I was having a little trouble
following the <div> within <div> stuff,
with the “pets” and “cats” and “dogs”.
Could you explain that a little more?
A:
Sure. You're used to elements being
nested in other elements, right? Like a <p>
nested in a <body> nested in an <html>
element. You've even seen lists nested
within lists. The <div> is really no different;
you're just nesting an element inside another
element, and, in the case of PetStorz, we're
using it to show larger chunks of structure (a
“cats” and “dogs” nested in a “pets” section).
Or, you might use <div>s to have a beer
section nested in a beverages section nested
in a menu section.
if it is helpful to add a “pets” section that
contains both “cats” and “dogs” to the
PetStorz page, by all means add it. However,
if it provides no real benefit, then it just
complicates your page. After working with
<div>s for a while, you'll start to get a feel for
when and how much to use them.
Q:
Do you ever put a <div> in a class
instead of giving it an id?
A:
Well, remember that an element can
have an id
and
be in one or more classes at
the same time, so the choice isn't mutually
exclusive. And, yes, there are many times
you create <div>s and place them into
classes. Say you have a bunch of album
sections in a page of music playlists; you
might put all the elements that make up the
album into a <div> and then put them all
in an “albums” class. That identifies where
the albums are, and they can all be styled
together with the class. At the same time,
you might give each album an id so that it
can have additional style applied separately.
But the best way to understand why you'd
want something like a <div> within a <div> is
by using them and encountering a situation
where they mean something to you. Put this
in the back of your mind, and you'll see an
example soon enough where we need one.
Use, don't abuse, <div>s in your pages. Add more
structure where it helps you separate a page into logical
sections for clarity and styling. Adding <div>s just for
the sake of creating a lot of structure in your pages
complicates them with no real benefit.
