Shouldn't we use <noscript> element?

It's better to have the default be non-javascript, and then let a javascript code overwrite with a javascript enabled page. Doesn't have to be much. Can just be a display:none; block, which is then set to display:block; by javascript, and vice versa for the non-js page.


After pondering for many days and changing my code back and forth, I think I have clearer picture now and would like to share my two cents worth on the subject before I forget. 

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

vs

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

Depending on the situation, there are three cases for consideration:

Case 1 - If required script is inline

JavaScript disabled

  • Content in <noscript> element appears immediately, non-js content is shown
  • Content in <div> element appears immediately, non-js content is shown

JavaScript enabled

  • Content in <noscript> element does not appear at all, js content shown
  • Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <noscript> element is advantageous.

Case 2 - If required script is from external (third-party) source, but hiding of <div> element is done with inline script

JavaScript disabled

  • Content in <noscript> element appears immediately, non-js content is shown
  • Content in <div> element appears immediately, non-js content is shown

JavaScript enabled but required script is blocked

  • Content in <noscript> element does not appear at all, nothing is shown!
  • Content in <div> element may momentarily appear before being hidden, nothing is shown!

JavaScript enabled and required script is received

  • Content in <noscript> element does not appear at all, js content shown
  • Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <noscript> element is advantageous.

Case 3 - If required script hides the <div> element

JavaScript disabled

  • Content in <noscript> element appears immediately, non-js content is shown
  • Content in <div> element appears immediately, non-js content is shown

JavaScript enabled but required script is blocked

  • Content in <noscript> element does not appear at all, nothing is shown!
  • Content in <div> element appears, non-js content is shown

JavaScript enabled and required script is received

  • Content in <noscript> element does not appear at all, js content shown
  • Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <div> element is advantageous.

In summary

Use <noscript> element if rendering of the HTML content depends on third-party scripts or if the required script is inline. Else, use <div> element and make sure that the required script contains:

document.getElementById('noscript').style.display='none';

Although Tor Valamo has an elegant answer to this problem, there is an issue which may cause you to opt out of using this technique.

The problem is (usually) IE. It has the tendency to load and execute the JS a bit slower than other browsers causing it to sometimes flash the "Please Enable Your Javascript" div for a split second before it then loads the JS and hides the div.

It is annoying and to get around this you can implement the "classic". <noscript> redirect approach.

<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>

This is the most solid technique that I've come across with regards to this little nasty.

Tags:

Javascript

Noscript

Xhtml

Web Standards

Recent Posts