By David Alfaro
What do I mean by “shuffled
tags”? It’s my shorthand for what some authors have called Invalid Markup or Malformed markup
as a cause of Tag soup. More
precisely, it refers to placing “end
tags in the wrong order”, as stated in the HTML TIDY documentation. For
example, consider this fragment:
<p>
here is a para
<b> bold <i> bold italic</b> bold?</i> normal?
</p>
At a glance, you can see that the end tag
</b> appears where
</i> should and,
conversely, the end tag
</i> is where the
</b> should be placed.
Well, well, not so bad. But remember that anything between <i> and </i>
is in italics and anything between <b>
and </b> is in
bold. That’s the way browsers render it, at least in Internet Explorer 7 and
Firefox 2 . IT DOESN’T MATTER THAT <i>…
</i> AND <b>…
</b> ARE OVERLAPPED! That
is, I will take THIS specific behavior as consistent between IE7 and FF2. I’ll
assume that THIS specific browser rendering is what the “web developer”
understood and accepted.
In the aforementioned HTML TIDY documentation, you will find
the latter shuffled tag example is supposedly corrected to:
<p>
here
is a para
<b>bold <i>bold italic</i> bold?</b> normal?
</p>
Hmmm, what do you think? Hmmm, wait a minute! Something is wrong. Let’s see the behavior in
Internet Explorer 7:
Source:
“Corrected”:
I knew it! Remember our today’s mantra: “anything between <i> and </i> is in italics and anything
between <b> and </b> is in bold: so, it doesn’t
matter if they are overlapped”.
A more realistic solution is:
<p>
here
is a para
<b>bold
</b><i><b>bold italic </b>bold? </i>normal?
</p>
This solution is a little bit verbose, isn’t it? Well, yes,
but this solution expresses author’s intention using the semantics of HTML/XHTML.
Thus, you rely on standards rather than relying on browser interpretation. Does
it really matter? Undoubtedly! Search bots
don’t necessarily read pages exactly as browsers do. In this context, relying on standards is
always a safer bet. Ask Chris
Maunder of CodeProject about his experiences with Google when it comes to
reading and indexing pages related to HTML syntax and DOCTYPE.
[Search bots don’t necessarily read pages exactly as browsers do. In this context, relying on standards is
always a safer bet]
How many kinds of “shuffled tags” exist? Maybe a more useful
question is: Which kinds of “shuffled tags” are more popular in the web? What
are their solutions? We are preparing a serious study about it and we’ll post
it very soon. Stay tuned. [Update: A new post about the top ten shuffled tags scenarios]
So far, my “realistic solution” is for me the best solution
regarding HTML syntax. Do you agree with me? Do you have a better solution? Please
let me know; we depend on your feedback to create a better web.
Your comments are
welcome!
