View RSS Feed

ddadmin

Updating a JavaScript to be XHTML compliant

Rate this Entry
As a webmaster you've undoubtedly noticed the increasing shift in coding practices from HTML to XHTML on the web. If you're a professional web designer, you've probably even heard it first hand from your clients who demand their web pages be XHTML compliant. I get quite a lot of emails on a monthly basis asking for help in making a webpage that contains a DHTML script to be XHTML compliant. A common misconception is that this is a difficult process, which can be no further from the truth.

There are two ways to go about making a DHTML or JavaScript XHTML compliant, both should take no more than a few moments of your time.

Method 1: For inline JavaScript, wrap the code itself in the CDATA tag coupled with some clever use of JavaScript comments to let the validator know the content within the script should not be parsed for XHTML validity:

Code:
<script type="text/javascript">
/*<![CDATA[*/
//The JavaScript code itself
//The JavaScript code itself
// etc...
/*]]>*/
</script>
As you can see, just wrap any inline JavaScript with the parts in red, and you're done. You may also choose to use an alternate version of the CDATA/ JavaScript comment code:

Code:
<script type="text/javascript">
//<![CDATA[
//The JavaScript code itself
//The JavaScript code itself
// etc...
//]]>
</script>
Either code wrappers work.

Method 2: The other method for making your JavaScript XHTML compliant is to remove the entire script from your page, and place its contents inside an external JavaScript file, then reference this file on your page:

Code:
<script type="text/javascript" src="myscript.js">
//Comment here
//Comment here
</script>
Where "myscript.js" contains the script itself minus the surrounding SCRIPT tags. Comments within the script tags are still allowed.

And there you have it. Now a JavaScript no longer has to trip up the XHTML validity of your pages!

Submit "Updating a JavaScript to be XHTML compliant" to del.icio.us Submit "Updating a JavaScript to be XHTML compliant" to StumbleUpon Submit "Updating a JavaScript to be XHTML compliant" to Google Submit "Updating a JavaScript to be XHTML compliant" to Digg

Comments

  1. Snookerman's Avatar
    Is this necessary if you still tell the browsers to parse the page as HTML? I know it's not valid according to the W3C validator, but what's important is not that the page validates there but rather that the code is valid .
    Updated 04-02-2009 at 07:57 AM by ddadmin
  2. ddadmin's Avatar
    Depending on the page's doctype it may still validate even without going through the above. The best way to know for sure is just to run the page through the validator.
  3. Twey's Avatar
    I don't expect most of the scripts on DD would work on an XHTML page anyway. There are a lot of document.write()s and things, and assumptions that don't hold true for XHTML.

    Quote Originally Posted by Snookerman
    Is this necessary if you still tell the browsers to parse the page as HTML? I know it's not valid according to the W3C validator, but what's important is not that the page validates there but rather that the code is valid .
    An XHTML page served with a text/html Content-Type is not valid in any way that matters anyway, much in the same way that a PNG file will not display properly if you tell the browser it's a JPEG. HTML and XHTML just happen to be close enough in syntax that the browser can mostly error-correct one to the other.

    As a webmaster you've undoubtedly noticed the increasing shift in coding practices from HTML to XHTML on the web.
    Not really — in fact, I know of only a couple of sites that use XHTML. Most people want to keep IE support.
    If you're a professional web designer, you've probably even heard it first hand from your clients who demand their web pages be XHTML compliant.
    Telling them that they'd lose half their userbase if they were usually discourages them.
  4. Snookerman's Avatar
    Quote Originally Posted by Twey
    An XHTML page served with a text/html Content-Type is not valid in any way that matters anyway, much in the same way that a PNG file will not display properly if you tell the browser it's a JPEG. HTML and XHTML just happen to be close enough in syntax that the browser can mostly error-correct one to the other.
    I know, that is what I meant by my question. I asked this since ddadmin was talking about a way to make the XHTML pages* with JavaScript valid, but this is just misleading since the validator doesn't think about the content type.

    *I'm assuming ddadmin refers to the numerous sites that use XHTML and pass it as HTML and not the real XHTML which like you said is not supported by IE.