<noscript> supplies content when scripting is unavailable or disabled. It does not appear merely because a script fails, a network request breaks, or a JavaScript exception occurs.
A useful fallback
With scripting enabled, the script adds an enhancement message. With scripting disabled, the noscript explanation appears and the ordinary instructions remain.
HTML and CSS
HTML
<h1>Practice instructions</h1>
<p>Change one CSS declaration, save the file, and reload.</p>
<p id="enhancement"></p>
<noscript
><p>
The interactive helper is unavailable. The instructions above still work.
</p></noscript
>
<script>
document.querySelector("#enhancement").textContent = "The interactive helper is enabled.";
</script>
CSS
Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Placement and parsing
In body, noscript can supply the content valid in its context, but cannot contain another noscript. In head, the scripting-disabled content is restricted to link, style, and meta elements. Do not put a paragraph in a head-level noscript.
When scripting is enabled, its source content is parsed differently and is not rendered as the disabled-scripting fallback. This distinction matters when inspecting the DOM.
Test both modes
Copy the document, disable JavaScript in the browser, then reload. The preview on this site normally has scripting enabled, so its disabled mode is an inspection exercise rather than something an editor button toggles.
Keep essential instructions in ordinary HTML when possible. Use explicit loading and error states for a failed enhancement; noscript cannot serve as catch-all error feedback.
Sources and browser support
MDN: noscript describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.