HTML and CSS Reference
In-Depth Information
Let's nest the elements in each
grouping in a <div> element.
Using div s to mark sections
h1
Now that you know which elements belong
in each section, you can add some HTML
to mark up this structure. The common
way to do this is to place
<div>
opening
and closing tags around the elements that
belong to a logical section. Let's first do this
pictorially, and then we'll come back to the
real markup in a couple of pages.
div
h2
Here's our cat group
.
p
div
h2
p
p
p
img
Labeling the div s
h1
Just by nesting your elements in
<div>
s,
you've indicated that all those elements
belong to the same group. But you
haven't given them any kind of label
that says what the grouping means,
right?
div id=“cats”
h2
p
A good way to do that is to use an
id
attribute to provide a unique label for
the
<div>
. For instance, let's give the
cats
<div>
an id of “cats” and the
dogs
<div>
an id of “dogs”.
And li
kewise
for d
ogs
div id=“dogs”
h2
p
p
img
