Path // www.yourhtmlsource.com → Reference → <noscript>

<noscript>

by Ross Shannon

The <noscript> element defines content to be displayed when JavaScript is disabled in the browser or not supported. It provides a fallback mechanism to ensure users can still access essential information or functionality even when scripts cannot run. This supports the principle of progressive enhancement in web development.

Clock This page was last updated on 2025-11-27


Syntax

In the body:

<noscript>
  <p>This website requires JavaScript to function properly.</p>
</noscript>

In the head:

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

Attributes

  • Global attributes only - The <noscript> element accepts standard global attributes like id and class, but these are rarely used.

Examples

Simple warning message:

<noscript>
  <div class="no-js-warning">
    <p>JavaScript is disabled. Some features may not work correctly.</p>
  </div>
</noscript>

Alternative content for interactive features:

<div id="interactive-chart">
  <!-- JavaScript will populate this -->
</div>
<noscript>
  <img src="chart-static.png" alt="Sales data chart showing growth">
  <p>Enable JavaScript to view the interactive version.</p>
</noscript>

Loading alternative stylesheet:

<head>
  <noscript>
    <link rel="stylesheet" href="noscript.css">
    <meta http-equiv="refresh" content="0;url=no-js-version.html">
  </noscript>
</head>

Providing alternative navigation:

<nav id="js-menu">
  <!-- JavaScript-powered menu -->
</nav>
<noscript>
  <nav class="basic-menu">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</noscript>

Graceful degradation for forms:

<form id="ajax-form">
  <!-- Form with JS validation and AJAX submit -->
  <noscript>
    <p class="warning">Form validation requires JavaScript.
    Please double-check your entries before submitting.</p>
  </noscript>
  <input type="text" name="email" required>
  <button type="submit">Submit</button>
</form>

When to Use

Use <noscript> to provide fallback content for:

  • Critical information - Important messages that users must see
  • Alternative functionality - Basic versions of JavaScript-dependent features
  • Accessibility - Ensuring content is available to all users
  • SEO purposes - Providing content for search engine crawlers
  • Progressive enhancement - Building sites that work without JavaScript first

Best practices:

  • Design your site to be functional without JavaScript first (progressive enhancement)
  • Provide meaningful alternatives, not just "Enable JavaScript" messages
  • Use <noscript> in the head for loading alternative stylesheets or meta redirects
  • Keep fallback content simple and focused on core functionality
  • Consider users with JavaScript disabled for security, privacy, or accessibility reasons
  • Test your site with JavaScript disabled to ensure good fallback experience
  • Don't hide essential content behind JavaScript if possible

When <noscript> content is displayed:

  • JavaScript is disabled in browser settings
  • Browser doesn't support JavaScript
  • Corporate/institutional firewalls block scripts
  • Scripts fail to load due to network issues
  • User has installed script-blocking extensions

Content restrictions:

  • In <head>: Only <link>, <style>, and <meta> elements allowed
  • In <body>: Any flow content (paragraphs, divs, images, etc.) allowed
  • Cannot nest <noscript> elements inside each other

Related Elements

  • <script> - The element that <noscript> provides fallback for
  • <head> - Can contain <noscript> with limited elements
  • <body> - Can contain <noscript> with any content
  • <link> - Can be used inside <noscript> in head
  • <meta> - Can be used for redirects inside <noscript>