noscript Fallbacks

Use noscript for honest degraded experiences — messaging, critical CSS alternatives, and what not to expect from modern JS-heavy apps.

beginner3 min readUpdated Aug 4, 2026

html
noscript

<noscript> holds content shown when scripting is unavailable or disabled. It is not a full multi-page strategy for a React SPA, but it still matters for progressive enhancement messaging, analytics fallbacks, and email-like constrained environments.

Docs: MDN <noscript>, HTML living standard.

Basic usage

<body>
  <div id="root"></div>
  <noscript>
    <div class="noscript-banner">
      <h1>JavaScript required</h1>
      <p>
        This app needs JavaScript enabled.
        <a href="/static/help.html">Read the help center (static)</a>
        or enable JavaScript and reload.
      </p>
    </div>
  </noscript>
  <script type="module" src="/app.js"></script>
</body>

In <head>, noscript can include link/style/meta in some cases:

<head>
  <noscript>
    <link rel="stylesheet" href="/no-js.css" />
  </noscript>
</head>

What users actually see

Browser with JS disabled
Broken/blocked script loading (sometimes — not always the same as noscript)
Some corporate proxies stripping scripts

Failed network for your bundle usually still executes nothing useful but may not show noscript if the browser considers scripting enabled. Don’t treat noscript as a network error UI — use SSR/shell content for that.

Progressive enhancement mindset

Better than a dead end:

<main>
  <h1>Docs</h1>
  <article>
    <!-- server-rendered article HTML -->
  </article>
</main>
<script type="module" src="/enhance.js"></script>

Core content works without JS; scripts enhance search, widgets, etc. noscript becomes optional polish.

Analytics and pixels (historical)

<noscript>
  <img src="https://analytics.example/pixel.gif" alt="" />
</noscript>

Less common with modern tag managers; privacy and CSP often block this pattern. Prefer server-side analytics for critical metrics.

Accessibility and honesty

State clearly what works without JS
Provide links to static alternatives (docs, support email, phone)
Don’t hide critical legal content only in JS

Interview out-loud

“noscript renders when scripting is off. I use it for an honest message and links to static alternatives. It’s not a substitute for SSR or resilient shells when JS fails to load. Best systems work without JS for core content and enhance upward.”

Footguns

Empty SPA with no noscript and blank page.
Assuming noscript covers CDN outages.
Heavy marketing pages that are empty without JS for SEO-critical text.
Putting interactive apps only in noscript (inverted wrong).
Forgetting that crawlers vary on JS execution — SSR still matters.

Documentation site pattern

<body>
  <header>…</header>
  <main>
    <!-- fully server-rendered markdown -->
    <article>…</article>
  </main>
  <script type="module" src="/enhance-search.js"></script>
  <noscript>
    <style>
      .js-only { display: none !important; }
    </style>
  </noscript>
</body>

Content works without JS; search UI hides via js-only when scripting is off. That is progressive enhancement done properly — noscript styles help, but the article body never depended on JS.

Auth apps

Some products truly cannot function offline of JS (WebRTC boards, canvas tools). Still provide:

Clear explanation of requirements
Links to status/help
Contact support path

A blank white screen with a console error is not an acceptable degraded mode. noscript is the minimum; resilient error boundaries cover script failures after load.

CSS in noscript

<noscript>
  <link rel="stylesheet" href="/no-js.css" />
</noscript>

Useful to unhide server-rendered content that a JS bundle would otherwise progressively reveal. The inverse pattern — hide content with CSS and show via JS — harms no-JS and some crawlers; prefer visible content by default and enhance.