Table of Contents
INTRODUCTION
The <noscript> element is used to define a section of webpage which is executed when <script> tag is unsupported or scripting is currently disabled in the browser. This tag is typically used to display alternative content or messages when JavaScript is disabled
The <noscript> tag is used to provide fallback content for users who have disabled JavaScript in their web browsers or for browsers that do not support JavaScript. It ensures that important information is still available even if JavaScript is not executed.
The <noscript> element can be used in both the <head> and <body> section of webpage. When used in <head> section, it can contain one or more <link>, <style>, <meta> elements in any order.
Syntax:
<noscript>
-- Code --
</noscript>
Example: In the below example if javascript is disabled then the warning message is shown otherwise it is ignored.
<noscript>
Hey Your Browser does not support Javascript.
</noscript>
ATTRIBUTES
The <noscript> element only includes global attributes.
Tag Omission
For <noscript> element both the start and end tags are mandatory.
How to test noscript tag?
To test the <noscript> tag, you need to disable JavaScript in your browser or use developer tools to simulate a no-JavaScript environment. Here are a few ways to do that:
1. Disable JavaScript in Your Browser
Google Chrome - settings > Privacy and security > Site settings > find JavaScript and toggle it off.
Edge: - settings > Cookies and site permissions > Site permissions > find JavaScript and toggle it off.
Firebox:
- Type about:config in the address bar and press Enter.
- Click Accept the Risk and Continue to enter the settings.
- Click show all
- Search for javascript.enabled
- Click on it to set it to false.
2. Browser Extension
You can use an Google Chrome extension like Disable JavaScript for quick toggling.
Usage
The <noscript> tag is typically used to display alternative content or messages when JavaScript is disabled. Below are some common use cases:
1. Displaying a Message
The <noscript> tag can be used to display a message to user.
<noscript>
<p>JavaScript is disabled in your browser. Please enable JavaScript for the best experience.</p>
</noscript>
2. Providing Alternative Navigation
The <noscript> tag can be used to divert a user to alternate page which is specially designed without using javascript.
<noscript>
<a href="alternative-page.html"> Click here if the site is not loading properly. </a>
</noscript>
3. Using <noscript> Inside <head> for Alternative CSS
The <noscript> tag can be placed in the <head> section to apply alternative styles if JavaScript is disabled:
<noscript>
<link rel="stylesheet" href="noscript-style.css">
</noscript>
Best Practises
- Avoid relying on JavaScript for critical functionalities.
- Provide meaningful alternative content within <noscript>.
- Test your website with JavaScript disabled to ensure accessibility.
Frequently Asked Questions (FAQ)
What is <noscript> tag in html?
Where the <noscript> tag, can be placed in an HTML document?
- Inside <head> - Used when you want to apply alternative styles if JavaScript is disabled.
- Inside <body> - Used to display fallback messages, links, or images when JavaScript is disabled.
What kind of content the <noscript> tag can contain?
- Inside <head> - It can only contain <link>, <style> and Plain text
- Inside <body> - It can contain HTML elements like <p>, <div>, <a>, <img>, <form>, etc.
What is the difference between <script> and <noscript> tag?
The <script> Tag used to include and execute JavaScript code.
The <noscript> Tag provides fallback content for users with JavaScript disabled or when the browser doesn't support JavaScript.