<noscript>

Definition and Usage

The <noscript> element establishes an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.

The <noscript> element can be used in both <head> and <body>:

• When used inside the <head> element, it must contain only <link>, <style>, and <meta> elements
• When used inside the <body> element, it can contain any HTML elements that are allowed in the body

Attributes

The <noscript> tag supports the Global Attributes in HTML.

Examples

Basic Fallback Message

Display a simple message when JavaScript is disabled:

<noscript>
  <p>JavaScript is disabled in your browser. Some features may not work properly.</p>
</noscript>

Alternative Content

Provide alternative content when JavaScript is not available:

<script>
  document.write("<p>JavaScript is enabled! Welcome!</p>");
</script>

<noscript>
  <p>JavaScript is disabled. Please enable JavaScript for the best experience.</p>
  <p>You can still browse our <a href="/sitemap.html">sitemap</a> or <a href="/contact.html">contact us</a>.</p>
</noscript>

Redirect to No-JavaScript Page

Redirect users without JavaScript to a special page:

<noscript>
  <meta http-equiv="refresh" content="0; url=/no-javascript.html">
</noscript>

Alternative Stylesheet

Load a different stylesheet when JavaScript is disabled:

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

Progressive Enhancement Example

Provide basic functionality without JavaScript:

<!-- JavaScript-enhanced search -->
<div id="search-widget">
  <input type="text" id="search-input" placeholder="Search...">
  <button onclick="performSearch()">Search</button>
</div>

<noscript>
  <!-- Fallback to regular form submission -->
  <form action="/search" method="GET">
    <input type="text" name="q" placeholder="Search...">
    <button type="submit">Search</button>
  </form>
</noscript>

Critical Content Fallback

Display critical content for users without JavaScript:

<div id="important-notice"></div>

<script>
  // Load notice via JavaScript
  fetch('/api/notice')
    .then(response => response.text())
    .then(data => {
      document.getElementById('important-notice').innerHTML = data;
    });
</script>

<noscript>
  <div style="background: #fff3cd; border: 1px solid #ffc107; padding: 15px; margin: 20px 0; border-radius: 5px;">
    <h3>Important Notice</h3>
    <p>Our site will be undergoing maintenance on Sunday from 2-4 AM EST.</p>
    <p>For urgent matters, please <a href="/contact.html">contact us</a> directly.</p>
  </div>
</noscript>

Styled Warning Banner

Create a prominent warning for users without JavaScript:

<noscript>
  <div style="background-color: #f44336; color: white; padding: 20px; text-align: center; position: fixed; top: 0; left: 0; right: 0; z-index: 9999;">
    <strong>⚠️ JavaScript is Disabled</strong>
    <p style="margin: 10px 0 0 0;">Please enable JavaScript in your browser for the full experience.</p>
  </div>
</noscript>

Use Cases

• Graceful Degradation: Provide basic functionality when JavaScript is unavailable
• Accessibility: Ensure critical content is available to all users
• SEO: Make important content visible to search engine crawlers
• User Notifications: Inform users about JavaScript requirements
• Alternative Stylesheets: Load different CSS for non-JavaScript environments
• Redirects: Direct users to simplified versions of your site
• Forms: Provide server-side form submission as fallback

Best Practices

• Provide meaningful alternatives - Don't just say "enable JavaScript"; offer actual alternatives
• Don't rely solely on noscript - Use progressive enhancement as the primary approach
• Make critical content accessible - Essential information should work without JavaScript
• Test without JavaScript - Regularly test your site with JavaScript disabled
• Keep it simple - Don't overload noscript with complex content
• Use for important notices - Inform users about what features require JavaScript
• Consider SEO - Search engines may not execute JavaScript, so provide HTML alternatives
• Progressive enhancement - Build with HTML first, then enhance with JavaScript

When to Use <noscript>

Use <noscript> for:

• Critical Functionality: When JavaScript is required for core features
• Accessibility: Ensuring important content is available to everyone
• User Notifications: Informing users about JavaScript requirements
• SEO Content: Providing content to search engines that don't execute JavaScript
• Redirects: Sending no-JS users to alternative pages
• Form Fallbacks: Providing server-side alternatives to AJAX forms

Don't overuse <noscript>:

• Build with progressive enhancement instead of relying on noscript
• Most users have JavaScript enabled today (97%+)
• Focus on accessible, semantic HTML that works without JavaScript first

Progressive Enhancement vs Graceful Degradation

JavaScript Detection

You can also detect JavaScript availability using CSS:

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <title>JS Detection</title>
  <style>
    /* Styles when JS is disabled */
    .no-js .js-only {
      display: none;
    }

    .no-js .no-js-message {
      display: block;
    }

    /* Styles when JS is enabled */
    .js .js-only {
      display: block;
    }

    .js .no-js-message {
      display: none;
    }
  </style>
  <script>
    // Remove no-js class and add js class
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>
</head>
<body>
  <div class="no-js-message">
    <p>JavaScript is disabled. Some features may not work.</p>
  </div>

  <div class="js-only">
    <p>JavaScript is enabled! Full features available.</p>
  </div>
</body>
</html>

Try it Yourself

Statistics

• Approximately 0.2-2% of users browse with JavaScript disabled
• Some corporate networks disable JavaScript for security
• Search engine crawlers may not always execute JavaScript
• Users with older browsers or assistive technologies may have limited JavaScript support
• Mobile devices with data-saving modes may disable JavaScript

Related Tags

• <script>

  Defines a client-side script

• <meta>

  Defines metadata about an HTML document

• <iframe>

  Defines an inline frame

• <object>

  Defines an embedded object

• <link>

  Defines the relationship between documents