HTML tags should not be overlapped. “Fine,” you say, “but what do you mean by overlapping tags?”
To overlap HTML tags means to open one tag and then open a second tag before you close the first one. (So far, so good, up to this point, nothing wrong has been done.) Then—and here is where the overlapping comes in—you close the first tag before you close the second one. You can’t do that. Well…okay, you can do it; I mean it’s just text, and you can type the text in however you want, but it is invalid HTML code. Here’s the rule, according to me:
All tags opened within other tags must be closed inside the same tag they were opened in.
Did you have trouble following that? It’s okay, so did I. It was hard to write, too.
Perhaps it would be easier if you could see what overlapped code looks like compared to non-overlapped code.
|Desired results||aaa bbb ccc|
|Overlapping code||<b>aaa <i>bbb</b> ccc</i>|
|Correct code||<b>aaa <i>bbb</i></b> <i>ccc</i>|
In the overlapped code, the italics tag is opened inside the bold tags but is closed outside of them. That’s overlapping, and it must be avoided.
In the “correct” example, the italics tag that was opened inside the bold tags is also closed inside the bold tags. A new set of italics tags is used to italicize the text after the bolded text. This is correct and avoids the issue of overlapping HTML tags.
Still confusing? Perhaps an analogy will help. Think of every pair of HTML tags as boxes. You can put a smaller box inside a bigger box. But you can’t put a box inside and outside another box at the same time. Likewise, the italics tag can not be partly in and partly out of the bold tag.
If you overlap HTML tags, the browser usually will not give you error messages. In fact, it will usually display it correctly. So, why should you bother writing the code correctly? Because I said so, that’s why!
Now you’re ready to tackle empty tags.