87
divs and spans
you are here
�
437
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,
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 <div>s 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 a
class called “albums”. 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.
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.
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.
there are no
Dumb Questions
Use, don’t abuse, <div>s in your pages. Add additional
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.
