<noscript>
The noscript element provides fallback content for browsers where JavaScript is disabled or not supported.
Syntax
<!-- Inside <head> (only link / style / meta are allowed as children) -->
<head>
<noscript>
<link rel="stylesheet" href="no-js.css?lang=en">
</noscript>
</head>
<!-- Inside <body> (any HTML element is allowed as children) -->
<body>
<noscript>
<p>Please enable JavaScript to view this page correctly.</p>
</noscript>
</body>
Where it can be used
| Location | Description |
|---|---|
| Inside <head> | Only link, style, and meta elements are allowed as children. Use this to apply CSS and similar resources only when scripting is disabled. |
| Inside <body> | Any HTML element is allowed as children. Use this to display a message or alternative content when scripting is disabled. |
Sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>noscript sample</title>
<!-- This CSS is only loaded when JS is disabled -->
<noscript>
<style>
.js-only { display: none; }
.no-js-message { display: block; }
</style>
</noscript>
</head>
<body>
<!-- Element shown when JavaScript is enabled -->
<div class="js-only">
<button id="loadBtn">Load content</button>
<div id="content"></div>
</div>
<!-- Fallback shown when JavaScript is disabled -->
<noscript>
<div class="no-js-message">
<p>This page uses JavaScript.</p>
<p>Please enable JavaScript in your browser settings and try again.</p>
</div>
</noscript>
<script>
document.getElementById("loadBtn").addEventListener("click", function() {
document.getElementById("content").textContent = "Content loaded!";
});
</script>
</body>
</html>
Result
When JavaScript is enabled, a button is displayed and clicking it reveals text. When JavaScript is disabled, a message appears in place of the button.
<!-- When JavaScript is enabled --> [Load content] button is displayed <!-- When JavaScript is disabled --> This page uses JavaScript. Please enable JavaScript in your browser settings and try again.
Notes
Most modern browsers support JavaScript, but users may disable it for security reasons, or they may be using an older browser. Using noscript lets you provide at least a basic experience in those environments.
Search engine crawlers such as Googlebot do not always execute JavaScript fully. If important content is only rendered via JavaScript, it may affect your SEO (search engine optimization). It is recommended to provide important content as plain HTML rather than relying on JavaScript.
It helps to think of noscript as a pair with the script element. The ideal pattern is to use script to provide dynamic functionality, and noscript to provide a fallback for environments where that functionality is unavailable.
Browser compatibility
2 or earlier ×
14 or earlier ×
Android Browser
37+ ○
4 or earlier ×
Chrome Android
36+ ○
17 or earlier ×
Firefox Android
79+ ○
3 or earlier ×If you find any errors or copyright issues, please contact us.