0%

<noscript> No-script fallback

Content that appears only when JavaScript is off or unavailable.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<noscript> holds content that is used only when scripting is turned off or unsupported. Use it to explain that a feature needs JavaScript, or to offer a simpler version.

Inside the head it may contain only link, style and meta elements. Building in layers is still the better plan: make the page work without JavaScript first, and you will rarely need noscript.

The noscript element in the HTML Living Standard (opens in a new tab) explains how its parsing changes with scripting on or off. It goes hand in hand with the script element.

Syntax

<noscript>
  <p>Fallback content</p>
</noscript>

When to use it

Embedded maps, live chat widgets and charts drawn on a canvas cannot work without JavaScript. For features like these, <noscript> holds a short fallback. Make it useful. A static image, the raw data or a phone number gives people another route, and a bare warning gives them nothing.

Before you add one, ask whether the feature could start as plain HTML that a script later improves. Build a product filter as a normal form with a submit button and it works with no JavaScript at all. The script only makes it faster, and you need no noscript.

Here is the big catch. noscript content shows only when scripting is switched off in the browser. When JavaScript is on but your script fails to download, gets blocked by an extension or crashes, noscript stays hidden and the user gets nothing. It is no substitute for error handling or a sensible default in the HTML. Loading options are in the script reference.

Live example

Edit the code and watch the preview.

<noscript>
  <p>This map needs JavaScript. <a href="map.pdf">Download the map as a PDF</a> instead.</p>
</noscript>
<p>Scripts are off in this preview, so you can see the message above.</p>

More examples

Hide script-only controls

Inside the head, noscript is allowed to contain a style element. This one hides a button that needs JavaScript, and the ordinary form below carries on working. The preview has scripts off, which is why you never see the instant-filter button.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Shop</title>
  <noscript>
    <style>.needs-js{display:none}</style>
  </noscript>
</head>
<body>
  <button type="button" class="needs-js">Filter instantly</button>
  <form action="/shop" method="get">
    <label for="max">Max price</label>
    <input type="number" id="max" name="max" min="0">
    <button>Apply filter</button>
  </form>
</body>
</html>

Data table instead of a chart

Normally a script would draw the chart on the canvas. Visitors without JavaScript get the same numbers from noscript as a small table, and nobody misses out. This preview shows the table.

<h2>Monthly visitors</h2>
<canvas id="chart" width="300" height="150"></canvas>
<noscript>
  <table>
    <tr><th scope="col">Month</th><th scope="col">Visitors</th></tr>
    <tr><td>January</td><td>1,200</td></tr>
    <tr><td>February</td><td>1,450</td></tr>
    <tr><td>March</td><td>1,980</td></tr>
  </table>
</noscript>

Tip: Where you can, make pages work without JavaScript.

Browser support

noscript works in every browser and is part of the HTML Living Standard. How browsers parse it depends on whether scripting is on. With scripts enabled, the content is treated as plain text and never rendered. Search engines that run JavaScript usually index the scripted page and ignore the noscript content.

Accessibility

If the core content is built in plain HTML first, an approach called progressive enhancement (opens in a new tab), noscript only needs to explain the extras that are missing.

Common mistakes

Wrong

<noscript>
  <noscript>Enable JavaScript</noscript>
</noscript>

Right

<noscript>
  <p>This calculator needs JavaScript. <a href="/rates">See the rate table instead</a>.</p>
</noscript>

Nesting noscript is not allowed, and a useful fallback beats a bare warning.

Frequently asked questions

When is noscript content shown?

Only when scripting is disabled in the browser, by the user's settings or a security policy for example. A script that fails to load or throws an error does not trigger it. For a fallback that covers failures, build progressively: begin with HTML that works and let JavaScript improve it, and do not lean on <noscript>.

Can I use noscript in the head?

Yes, with limits. In the <head> it may contain only <link>, <style> and <meta> elements, for example a stylesheet that reveals content a script-driven effect would normally hide. In the body it can hold any content that would be valid in that spot.

Related scripting elements

<script>Runs or loads JavaScript.<template>Inert HTML that the page does not render, kept for scripts to clone.<slot>Marks the spot in a web component where outside content gets inserted.