Validating XHTML containing Javascript

If you have been converting some old HTML 4 (or maybe even older!) documents into the more modern XHTML 1 standard, you might have run into a problem with your Javascript when you have been validating your documents, i.e. the W3C validator (for example) is saying your document is not valid or there are warnings, and that you should try escaping some of your Javascript characters, such as "&" and "<". Obviously, if you did that, your javascript wouldn't then work!

So why wont it validate anymore?

You may be wondering what is going on here. In "the good old days" your HTML containing inline javascript would validate fine, but now only a few minor changes and suddenly the validator is throwing strange errors at you telling your code is invalid - whats going on?

The answer is fairly straight forward, if somewhat subtle. Previously (when validating with HTML), the contents of the <script> tag was always treated as CDATA - i.e. "character data" that was not to be parsed any further. So as it was basically ignored by the validator or other processing applications, you could use any special characters (such as "&" and "<" etc) as much as you like, which meant javascript was fine.

XHTML however states that the <script> tag should have its contents treated as PCDATA - i.e. "parsed character data" that should be parsed by the processing application, such as the validator. So now, all of your javascript code is treated exactly the same as the rest of your document which is what is causing all the problems.

Ok - so javascript is PCDATA. Now what?

To get around this problem you can use one of two approaches.

The first of these approaches is to use an external javascript file, and simply reference this using the "src" attribute of the <script> tag. This is probably a more sensible way of doing things, and its also "The Right Way" of doing it as far as I know. But back in reality, its sometimes seems like a bit of overkill to use a separate file for what might only be two or three lines of code - this is where the second approach can be used.

The second approach uses a simple little trick that will be familiar to anyone who has dealt with XML. Here we are simply wrapping the javascript up in a CDATA section. This means the validator will treat the code just like it did in the old HTML days! For example:


<script type="text/javascript">

   // <![CDATA[

      ... your javascript goes here!

   // ]]>

</script>

Notice how I've commented out the start and end of the CDATA section declaration. This is to stop the browser getting confused whilst trying to execute the javascript.

Its interesting to note that the <style> tag (i.e. for inline CSS code) will also fall prey to this validation problem. If you are really interested, you can check out the official W3C XHTML-HTML4 differences, where there are about 12 differences listed.

Back 07.03.2006.

mdibb.net