HTML and CSS Reference
In-Depth Information
Using nesting to make sure your tags match
Your first payoff for understanding how elements are nested is that
you can avoid mismatching your tags. (And there's gonna be more
payoff later; just wait.)
What does “mismatching your tags” mean and how could that
happen? Take a look at this example:
SAFETY
FIRST
P
rope
rly
nes
t
you
r
e
lemen
ts
<p>
I'm so going to tweet
<em>
this
</em></p>
p
em
So far, so good, but it's also easy to get sloppy and write some HTML
that looks more like this:
WRO
NG: the <p> ta
g
ends
before the <em
>
tag!
The <em> elem
ent
is sup
posed to be ins
ide
the <
p> element.
<p>
I'm so going to tweet
<em>
this
</p></em>
Given what you now know about nesting, you know the
<em>
element
needs to be nested fully within, or contained in, the
<p>
element.
p
p
em
em
BA
D: here the <em> element
has leaked outside of the
<p>
element, which means it's
not properly nested inside i
t.
So what?
It's okay to mess up your nesting if you like playing Russian roulette. If you write HTML
without properly nesting your elements, your pages may work on some browsers but not
on others. By keeping nesting in mind, you can avoid mismatching your tags and be sure
that your HTML will work in all browsers. This is going to become even more important
as we get more into “industrial strength HTML” in later chapters.
