← Back to All Tags

<noscript>

Defines alternate content for users without JavaScript

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
Tip: The <noscript> tag provides a way to gracefully degrade your website for users without JavaScript support.
Note: Content inside <noscript> is only displayed if JavaScript is disabled or unavailable. If JavaScript is enabled, this content is hidden.

Browser Support

The <noscript> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

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

Examples

Basic Fallback Message

Display a simple message when JavaScript is disabled:

Example

<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:

Example

<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:

Example

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

Alternative Stylesheet

Load a different stylesheet when JavaScript is disabled:

Example

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

Progressive Enhancement Example

Provide basic functionality without JavaScript:

Example

<!-- 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:

Example

<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:

Example

<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

Progressive Enhancement (Recommended)

Build with HTML first, then enhance with CSS and JavaScript:

  1. Start with semantic HTML that works for everyone
  2. Add CSS for visual enhancement
  3. Layer JavaScript for interactive features
  4. Use <noscript> only for critical notices

Graceful Degradation (Old Approach)

Build with JavaScript first, then provide fallbacks:

  1. Build full-featured JavaScript application
  2. Add <noscript> fallbacks for missing functionality
  3. Less reliable and harder to maintain

JavaScript Detection

You can also detect JavaScript availability using CSS:

Example - CSS Class Toggle

<!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

Interactive Example

You're currently viewing this with JavaScript enabled. Here's what you'd see with JavaScript disabled:

✓ JavaScript is Currently Enabled

This message is displayed because JavaScript is working in your browser.

Try disabling JavaScript in your browser settings and refresh this page to see the <noscript> content!

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
Bottom Line: While most users have JavaScript enabled, it's still important to ensure your site's core functionality works without it. Use progressive enhancement and <noscript> for critical notices.

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