The HTML <noscript> element is used to display content in your site visitor’s browser when JavaScript is disabled.
So let’s say someone visits your website, but they have JavaScript disabled in their browser. To let them know (they could have turned JavaScript off by mistake), you would use <noscript> like this:
<noscript>
<h2>
JavaScript is disabled in your browser. To get the best user experience on
our website we recommend that you enable it.
</h2>
</noscript>To illustrate I’ve added the HTML snippet above to this CodePen
But you can’t see it unless JavaScript is disabled.
To disable JavaScript (temporarily):
- Go to your browser’s address bar and click on the lock icon, and then click on Site settings
- Under Permissions go to JavaScript and click on the dropdown to the right and select Block.
Now the reload the page (not your entire browser, just the one browser tab) you should see the text from the <noscript> element render in your browser tab.
Here’s a quick video showing the entire process:
To enable JavaScript again, go back to the same Site settings tab, and choose Allow from the dropdown menu. Now it will ask you to reload your browser tab again, and then JavaScript will be enabled again.
You can use the <noscript> element inside both the <head> and <body> element on your website.
However, if you use <noscript> inside the <head> element, you can only put <style>, <link>, and <meta> elements inside it (no text elements).
