HTML <noscript> Tag – Fallback When JavaScript is Disabled
📌 Introduction
The <noscript> tag is used to display alternative content when JavaScript is not available or disabled in the browser.
It ensures your website still communicates important information even without JavaScript.
🧱 Syntax
<noscript> JavaScript is disabled in your browser. </noscript>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>NoScript Example</title>
</head>
<body>
<h2>Welcome to My Website</h2>
<noscript>
<p style="color:red;">
JavaScript is disabled. Some features may not work.
</p>
</noscript>
<script>
document.write("JavaScript is working!");
</script>
</body>
</html>
🖥️ Output Explanation
If JavaScript is enabled:
- You will see: 👉 "JavaScript is working!"
If JavaScript is disabled:
- You will see:
👉 warning message inside
<noscript>
🎯 Why <noscript> is Important
1. 🧠 Fallback Support
Shows message when scripts cannot run.
2. ♿ Better User Communication
Users understand why something is not working.
3. 🌐 SEO & Accessibility
Helps search engines and users in restricted environments.
🧩 Where to Place <noscript>
You can place it in:
<head>(for CSS or meta warnings)<body>(for visible messages)
🧱 Example in Body
<body>
<noscript> Please enable JavaScript to use this website. </noscript>
</body>
🧠 Important Concept
👉 <noscript> only works when JavaScript is OFF
| State | Result |
|---|---|
| JS enabled | <noscript> ignored |
| JS disabled | <noscript> shown |
🚫 Common Mistakes
- Using it as normal content ❌
- Forgetting it’s only fallback ❌
- Expecting it to run with JavaScript ❌
🎨 Styling Example
<noscript style="color:red; font-weight:bold;">
Enable JavaScript for full experience
</noscript>
🧪 Mini Exercise
Create a page with:
- A JavaScript message (
script) - A
<noscript>warning message - Test by disabling JavaScript in browser
- Style the warning message