The <noscript> Tag in HTML

Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

In this article, we have explained the concept of noscript tag in HTML and how and when it is used in a webpage.

Table of Contents:

What is noscript
Use of the noscript Tag
HTML + noscript
Conclusion

What is noscript

To first understand what is the <noscript> in Html we must first understand what is the <script>. In simple terms the <script> is used to embed client-side Javascript code into HTML.

<html>
    <body>
      <p id="jscode"></p>
      <script>
      document.getElementById("jscode").innerHTML = "This is JavaScript"; 
      </script>
    </body>
</html>

In this example, the String "This is JavaScript" would appear between the p tags when rendered in the browser.

With this in mind we can say that <noscript> does the exact opposite. It renders content for browsers that dont have scripts supported(which is very rare or non-exsistant in this current time)or for clients that have scripts disabled.

Use of the noscript Tag

As stated in the previous chapter the <noscript> is used for those users which have JavaScript turned off in their browser or their browser just doesnt support Javascript an example of this would be

<html>
    <body>
      <p id="jscode"></p>
      <script>
          document.getElementById("jscode").innerHTML = "This is JavaScript"; 
      </script>
      <noscript>
          <h1>Sorry your JavaScript is off or your browser does not support JavaScript</h1>
      </noscript>
    </body>
</html>

In this example, the sentence between the noscript tags will be shown once the user has scripts turned off or thier browser doesn't support scripts, the String betwwen the script tags won't be shown in this case.

HTML + noscript

The <noscript> can be used in HTML5 in either the <head></head> or <body></body> elements, when placed in the <head></head> element it can only contain the <link>, <meta> or <style> tags. The <noscript> can also be used with HTML4 but in this case it can only be used within the <body></body>. Dont forget to use a closing tag with noscript

<noscript>
    <p>This is noscript Syntax</p>
</noscript>

Conclusion

As you can see the <noscript></noscript> can be used by Web Developer to inform the user that thier JavaScript is disabled or their browser just does not support Javascript, most end users are not tech savvy and letting them know that they are missing out on a more pleasing web experience when they visit your website can be very advantageous to you.

So in your next project remember to add <noscript> you just might help someone that is missing out on the fully interactive experience of your website.