HTML and CSS Reference
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:
P rope rly
e lemen ts
<p> I'm so going to tweet <em> this </em></p>
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.
BA D: here the <em> element has leaked outside of the
<p> element, which means it's not properly nested inside i t.
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.