Head First HTML with CSS

Q: So, a acts like a container
that you can put elements into to keep
them all together?
A: It sure does. In fact, we often
describe 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 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
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,
there are no
Dumb Questions
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 s for a while, you’ll start to get a
feel for when and how much to use them.
Q: Do you ever put 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 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 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.
divs and spans
Q: I was having a little trouble
following the within 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
nested in a nested in an
element. You’ve even seen lists nested
within lists. The 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 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 within a 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, s in your pages. Add additional
structure where it helps you separate a page into logical
sections for clarity and styling. Adding s just for
the sake of creating a lot of structure in your pages
complicates them with no real benefit.
you are here 437