HTML noscript: keep the essential task available without enhancement

Last updated: 5 Oct 20267 min read

tutorial

A noscript element provides fallback content when scripting is unavailable in the relevant context.

Use it for a real task

A receipt list can be rendered by the server as ordinary links. Script may add filtering, but the core record route still works without it. The fallback tells readers which enhancement is missing and where the basic route is. It does not create an offline cache, bypass authentication, or run a substitute service. Keep the message short and action-oriented.

<main>
  <h1>Receipts</h1>
  <p><a href="/receipts/R-47">Open receipt R-47</a></p>
  <noscript>
    <p>Live filters are unavailable. Use the receipt links above.</p>
  </noscript>
</main>
<script type="module" src="/assets/receipt-filter.js"></script>

What the markup guarantees

The record and script paths are application assets that must exist. A script may also fail after loading while noscript remains hidden; essential content must therefore stand on its own before enhancement.

Cost and limits

Server-rendered links add small HTML weight. They can remove the need for a client request before a reader reaches the task, while the optional filter script adds transfer and execution cost.

Common Mistakes

Do not make core links appear only after script execution.
Do not assume noscript appears when a loaded script throws.
Do not publish fallback links that lead to missing routes.

Connected lessons

Related CSS decisions

html

accessibility