Updated: May 2009
There’s some discussion on what exact syntax, use of comments, CDATA sections and character sequence–escaping is necessary or useful when embedding JavaScript code in HTML and XHTML pages.
These tests try to determine that, while doing away with some practices that were recommanded in the past and may not be relevant anymore, and paving the way for HTML 5 and XHTML 5
The criteria used here will be:
script HTML
elementFor the sake of simplicity, we would put or JavaScript code directly between
the <script> and </script> tags, maybe
declaring the type attribute if it’s required, and move along.
The HTML or XHTML specifications don’t any additional step. But problems arise when the JavaScript code contains some character sequences that will make a conforming SGML or XML parser choke. Such character sequences are:
</ which indicates a
closing tag.<, > or &
sign.--.The W3C markup validator doesn’t have a XHTML 5 validation mode (yet?),
so i didn’t test with XHTML5. Since XHTML5 is (/will be) XML, my guess is that
one would get the exact same results as with XHTML 1.0 served as
application/xhtml+xml.
In HTML 4, the </ character sequence will
trigger a validation error. The only way around it (not shown in the
test pages) is to escape this sequence, for instance writing
<\/ instead of every occurrence of </ in
your embedded JS code.
In XHTML (served as application/xhtml+xml), many things
will trigger parse errors (and corresponding validation errors). Parse
errors will basically mean that your page isn’t displayed at all, or
is only partly displayed. You don’t want this. Solution? Always use
a CDATA section.
If you write XHTML to be served as text/html — which is
what almost everyone does when writing XHTML 1.0, because IE doesn’t
understand application/xhtml+xml, and getting yellow pages
of death on each parse error is not desirable —, and intend to be able
to switch to application/xhtml+xml, then you may want to
use a CDATA section, then escape it with JS comments, and of course make
sure you escape every occurrence of </ in your embedded
JS code.
If you use a CDATA section in a text/html document,
you need to comment out the lines for the CDATA
markers. If they’re not commented, any browser will think that it has
to ignore the whole thing, and tadaaa— your JS code doesn’t work
anymore.
Note that if you write HTML 5 code, you don’t have to worry about
escaping </, or anything alse apparently. Just dump
whatever JS code you want between <script> and
</script>, and you’re good.
There’s less trouble with HTML. In HTML 5,
there’s no trouble at all. In HTML 4, you need to escape occurrences of
</, but if you forget the worse you’ll get is a validation
error.
If you write XHTML, you’re probably serving XHTML 1.0 as
text/html, so you shouldn’t get parse errors, but may till get
validation errors. Solution: use a CDATA section, but use JS
comments so that browsers will ignore those markers.
That’s a bit backwards, right? It’s almost like serving different code to browsers (“hey, Mr browser, please don’t see that CDATA section!”) and to validation tools (“hey, Mr W3 validator, see, i used a CDATA section!”).