Head First HTML with CSS

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:
I’m so going to blog this
p
Here’s how this HTML looks,
is nested inside .
So far, so good, but it’s also easy to get sloppy and write some HTML
that looks more like this:
I’m so going to blog this
Given what you now know about nesting, you know the element
needs to be nested fully within, or contained in, the element.
So what?
em
GOOD: here the element is
nested inside the .
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.
p
p
em
WRONG: the tag
ends before the
tag! The element
is supposed to be inside
the element.
em
building blocks
SAFETY FIRST
Properly
nest
your
elements
BAD: here the element has leaked outside of the
element, which means it’s not properly nested inside it.
you are here 111