Valid XHTML - External Javascrript

Javascript | Updated on 03-26-2008 03:04:08pm

So in my quest to make sure this page is completely XHTML compliant and validates according to the standards set by the WC3, I kept checking the validation.

Then I found myself running into a problem with the script tag. It took awhile, but after carefully reading the validation results and finding a couple of examples, I nixed the issues I had.

Mostly they were from 3rd part pieces, such as the examples shown for using tinyMCE or JQuery, etc. They included the depreciated language usage, and how I was closing it. The closing was easy, a couple of misplaced / slashes removed and I was golden.

I was a little more worried about language because I wasn't sure how it would react. But removed the offending elements and so far as I can tell it works properly in FF2, IE7. I did, just for fun try the site out on IE8 beta, not expecting it to work. It does, except for the tinyMCE plugin. It fails in it's code and I figure once it's out there will be a newer release that fixes that.

The following rules were found here:

• Even when src is specified, the script tag is not an empty tag, and cannot be written <script src=".... />. If you include the src you should not include any script before the opening and closing tags as browser handling of any script between the tags is not reliable.
• By convention, the external javascript file should have a .js extension, but this is not required.
• In XHTML, the type attribute is a required attribute.
  * The language attribute should only be included if the language is not javascript. The browser automatically defaults to the latest version of javascript it supports, so only specify the script language if the languge is something other than the lastest version of javascript. So, include language="vb" if you are including a visual basic script, but don’t include language="javascript1.3" if you are including a javascript file.
• The charset attribute is optional. Included it (charset="utf-8") if your script includes atypical characters. Omit it if you use only keyboard characters or if you escape your Javascript entity characters..
• Although you will usually find the script tag in head area, the best place to put it is right before the end of the body. The reason? When the browser encounters a script during page load it ceases downloading from the server. A <script src="url></script> will prevent the download of other page components until the .js file has been retrieved, compiled and executed. Placing the .js at the end of the body can improve both perceived and actual download time. However, if rendering the page requires functions from the javascript, include the javascript before the page calls required functions.
• The defer attribute – written defer="defer" in XHTML – is a fairly useless attribute of the script tag. It tells the browser that the script does not create any content allowing the browser to defer interpreting the script. The delaying of execution of scripts until after the body content is parsed and rendered is optional for the browser, and the browser still downloads the script, putting download of all other elements on hold, so unless there is a reason to include the script earlier in the page, the recommendation is to place the external script call immediately before the </body>.
• runat="server" is an optional attribute/value.  I haven’t ever used it, so can’t really comment on it. I assume it’s used for non-javascript scripts and for ASP.net javascripts, telling the server to run the script, or, in the case of any element in ASP.net, on the server.

I hope this helps others who are trying to gain a better understanding of XHTML compliance.