<noscript>

<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.

Inspect noscript behaviorLink

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.