1. Computing & Technology

HTML 5 And noscript

From , former About.com Guide

Around about 2005 the noscript tag that HTML 4 supports ceased to serve any useful purpose. Once all of the web browsers being used supported JavaScript DOM commands to update the content of the web page dynamically, this alternative way of being able to decide what does and doesn't appear in the page under what circumstances made using the noscript tag completely obsolete.

Not only is the JavaScript code to hide elements relatively short, it is also more flexible as you can remove inline elements just as easily as block elements whereas with noscript being a block element it can only hide entire blocks. Another thing with noscript is that it hides the block whenever JavaScript is available regardless of whether the commands you want the script to be able to run are supported or not whereas the JavaScript replacement can be set to use whatever condition you want in order to hide the content and not just hide it simply because JavaScript is available.

So what does this have to do with HTML 5?

Well with HTML 4 the noscript tag was only allowed in the body of the web page. It is not valid in the head of an HTML 4 page. HTML 5 hasn't done away with the noscript tag and has in fact changed the rules so that it is valid in the head of the page as well as the body. Presumably once those working on the HTML 5 standard catch up to 2005 from whatever year they are currently living in they will then change the standard to disallow it in the body where it is absolutely useless.

Now if web browsers could load web pages instantly, having the ability to use the noscript tag in the head of the page would be equally useless since anything that can be done with the noscript tag anywhere in a web page can be done far easier and more specifically by using JavaScript instead. Browsers can't load web pages instantly and so there is one useful purpose that a noscript tag can perform if used in the head of the page. A noscript tag in the head of a web page can be used to wrap around a stylesheet or in page styles.

You can't use a noscript tag to do this in HTML 4 because the link and style tags are only valid in the head and noscript is only valid in the body and therefore wrapping a link or style tag inside a noscript is invalid in HTML 4. With HTML 5 allowing noscript in the head of the page it becomes allowable in HTML 5.

Now using styles to control changes to the appearance of a web page where JavaScript is not available is a million times more flexible than trying to wrap each individual piece of content in its own noscript tag. Of course it is still a thousand times less flexible than making the changes with JavaScript since you are still limited to just whether JavaScript is available or not and can't test for specific JavaScript command support but it does have one significant benefit over using JavaScript to hide elements. That advantage is timing.

JavaScript always single threads when it downloads and so to speed up the downloading of web pages it is preferable to place the JavaScript immediately before the end of the body of the page. This both allows other parts of the page to download more quickly as well as allowing the JavaScript to run more quickly when the script has loaded since it is the last element in the DOM to load and therefore the rest of the DOM is already loaded and accessible.

The problem with placing the JavaScript at the bottom is that it can't update any of the elements of the DOM until all the HTML and the JavaScript has loaded and the JavaScript is likely to wait for all the other files to load first as well. One way around this is to embed the specific JavaScript that serves as a replacement for a given noscript in the HTML itself immediately after the DOM element it needs to update. This resolves the load time problem but at a cost of making your HTML messy with JavaScript fragments embedded in various places through your page.

Being able to wrap styles inside a noscript tag provides a much cleaner solution at least with regard to those pieces of the page that are specifically needed only when JavaScript isn't available at all. What you can do is to hide those elements in your main stylesheet instead of using JavaScript to do it. The second stylesheet wrapped inside the noscript can then make those elements visible again when JavaScript is not available. Since the second declaration inside the noscript overrides the first these elements will be visible if JavaScript is not available and invisible if it is - all done using one stylesheet in the head of the page rather than individual noscript tags wrapped around each. Also since it is styles that are determining the visibility you are not limited to hiding and unhiding entire blocks but can do it with inline elements as well.

This still doesn't give you all the flexibility that is available through using JavaScript but does avoid having the body of the page cluttered with noscript tags or JavaScript fragments to achieve the same result. The body of your page is much cleaner and that content which is only supposed to be visible if JavaScript is not available will not suffer from the problem of being visible all the time when the page first loads and only disappearing when the JavaScript finally loads and runs.

Of course the only impact of doing this is one of timing and so as loading web pages becomes faster and faster the problem that using noscript around styles in the head of your page is designed to fix will become smaller and smaller until such time as pages load and run their JavaScript so quickly that the noscript tag will once more be completely useless compared to the JavaScript alternative.

©2012 About.com. All rights reserved.

A part of The New York Times Company.