W3docs
en
Log in

HTML <noscript> Tag

The <noscript> tag has an alternative content, which is displayed in the browsers not supporting scripts. Description of the tag and examples of using.

The <noscript> tag defines content that the browser shows only when JavaScript is unavailable — either because the browser does not support scripts, or because the user has disabled them. When JavaScript is enabled, the browser ignores the <noscript> element and renders nothing from it.

This page covers what <noscript> is for, where you are allowed to place it, and how to use it to give a meaningful experience to people who do not run your scripts.

When to use <noscript>

Modern interfaces lean heavily on JavaScript, but a non-trivial share of requests arrive with scripting off: privacy-conscious users with extensions like NoScript, locked-down corporate environments, flaky connections where a script failed to load, and many web crawlers. The <noscript> tag is the standard tool for progressive enhancement and graceful degradation — building a page that still communicates something useful when the JavaScript layer is missing.

Typical uses:

  • Replace a JS-rendered widget (a chart, a live feed, an interactive map) with a static message, link, or fallback image.
  • Warn the user that a feature depends on JavaScript and explain how to proceed.
  • Provide a non-JS alternative such as a plain <form> that posts to the server instead of submitting via fetch.

Closely related is the <script> tag, which embeds the JavaScript that <noscript> falls back from — the two are usually written together.

Where you can place <noscript>

In HTML5 the <noscript> tag can be placed in both the <head> and the <body>. In HTML4 it was only allowed inside <body>. The placement determines what content is permitted inside it:

  • Inside <head> it may contain only <link>, <style>, and <meta> elements. This is how you swap stylesheets or metadata for the no-JS case.
  • Inside <body> it may contain any flow content — paragraphs, images, links, forms, and so on.

For example, load a fallback stylesheet that styles content normally hidden until JavaScript reveals it:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <noscript>
      <link rel="stylesheet" href="no-js.css" />
    </noscript>
  </head>
  <body>
    <p>Page content.</p>
  </body>
</html>

<noscript> in the <body> (any flow content)

In the body you can use richer fallback content. This example renders a static message in place of a widget that JavaScript would normally build:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div id="chart">
      <script>
        document.getElementById("chart").textContent =
          "Interactive chart loaded with JavaScript.";
      </script>
      <noscript>
        <p>Charts require JavaScript. Please enable it to view live data,
          or <a href="/report.csv">download the raw report</a> instead.</p>
      </noscript>
    </div>
  </body>
</html>
Try it Yourself »

When JavaScript is enabled, the <script> replaces the container's contents and the <noscript> block produces nothing. When it is disabled, the script never runs and the user sees the static paragraph with a working download link.

Syntax

The <noscript> tag comes in pairs. The fallback content is written between the opening <noscript> and closing </noscript> tags.

<noscript>Sorry, your browser doesn’t support JavaScript!</noscript>

Attributes

The <noscript> tag supports the Global Attributes and Event Attributes.

Practice

Practice
What is the purpose of the HTML <noscript> tag?
What is the purpose of the HTML <noscript> tag?
Was this page helpful?