Getting Rid of Noscript
Examples to Show How Much Simpler Your HTML and JavaScript Will be Without it
Some people have disagreed with the view that getting rid of the <noscript> tag out of your web page will make the page more accessible, more semantically correct, and your JavaScript less obtrusive. Quite obviously these people haven't thought it through properly and so here are two simple examples that clearly demonstrate how getting rid of that tag will improve your page.
We'll keep things fairly simple for these examples and so a real world situation should result in far greater improvements than these examples will demonstrate however the improvements that these examples show will hopefully make it completely clear as to why you should no longer use that tag.
Let's start by considering where and how you can use the tag. The <noscript> tag is a block level tag which is only valid in the <body> of your web page. Now there are actually situations where using it in the <head> of your page would be useful but since it can't be used there those situations are unfortunately irrelevant to the argument about the tags usefulness.
For our first example let's output one of two paragraphs depending on whether JavaScript is supported or not. If it is supported we'll output "JavaScript is supported." and if it isn't supported we'll output "JavaScript is not supported.". Now because <noscript> is a block level tag we can't place it around the word "not" and solve the problem that way because, firstly, block level tags are not valid inside a paragraph. We can't get around that by making it a div rather than a paragraph because as a block level tag the <noscript> should start a new line before and after the tag and we don't want the word "not" on a line by itself. Adding style="display:inline" to the tag wouldn't fix it either because many browsers that don't support JavaScript don't support CSS either.
The traditional way of coding this to get around these issues would be:
document.write("<p>JavaScript is supported</p>");
</script>
<noscript><p>JavaScript is <b>not</b> supported.</p></noscript>
This code is long, repetitive, and uses another construct for which there is very little need these days, the document.write statement. We can improve the code slightly by making the JavaScript less obtrusive like this:
<noscript><p>JavaScript is <b>not</b> supported.<p></noscript>
<script type="text/javascript">
document.getElementById('script').innerHTML =
"<p>JavaScript is supported</p>";
</script>
This removes the dependency of the JavaScript in being attached to a specific spot in the web page but requires the addition of a div tag for it to use to add the content into. As long as the JavaScript runs after the div tag has loaded the code will work. We could even go one step further and replace the innerHTML with the standard DOM commands but I'll leave working out the much greater amount of code required for that solution to you since there is a much simpler way of coding this that requires even less code than the above that is as standard compliant as that DOM version would be.
<script type="text/javascript">
document.getElementById('script').style.display = 'none';
</script>
Note how much shorter this code is than the earlier versions. It does exactly the same thing as the best of those earlier versions and does it with JavaScript that can run at any time after the paragraph has loaded and uses only semantically correct tags for everything (substituting the strong tag for the b tag everywhere doesn't affect the discussion in any way if you feel that is a more semantically correct tag).
Our version without the <noscript> tag is therefore as accessible, more semantically correct, and the JavaScript is at least as unobtrusive as any of the other versions.
Now if that isn't enough to convince you that getting rid of the &t;noscript> tag is a good idea then the next example will since the code using <noscript> will be way more complicated than the code without it. For this second example let's substitute one word in our paragraph. Let's replace the word "JavaScript" with the word "Ajax" and change the way it is coded so that the appropriate version of the sentence is displayed.
Now we have a situation where we want the <noscript> version of the paragraph to display sometimes even when JavaScript is supported and so if we keep the <noscript> tag our JavaScript becomes an if statement that tests if Ajax is supported and then displays either that it is or displays the exact same paragraph as the noscript tag if it isn't.
Without the <noscript> tag we can do it with a slight modification to the JavaScript of our last example (The test needed for IE4 through IE6 significantly increases the length of this one but then you'd need the test even if you use noscript to make the necessary code even longer). Note that the HTML is still as simple as it can be and the JavScript can go in a separate file.
<script type="text/javascript">
function supportsAjax() {
if (typeof XMLHttpRequest != 'undefined') return true;
else if (window.ActiveXObject) {
var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp"];
for (var i = avers.length -1; i >= 0; i--) {
try {
httpObj = new ActiveXObject(avers[i]);
return true;
} catch(e) {}
}
}
else return false;
}
if (supportsAjax()) document.getElementById('script').style.display = 'none';
</script>
I'll leave it to you to imagine how much more complicated the code would be if you were using <noscript>.
These are of course really simple examples and so even the <noscript> versions of these are not all that complicated. When you get to real world situations where you want different processing based on whether JavaScript or some part of JavaScript is supported the improvements to accessibility, semantic HTML, unobtrusive JavaScript, and maintainability of the code will be even more dramatic.
And finally to demonstrate exactly how this works with a live example the next paragraph tells you if your browser supports Ajax.
Ajax is not supported.
