The <noscript> Element
As defined in the HTML Living Standard, the <noscript> element represents nothing if scripting is enabled, and represents its children if scripting is disabled. It is used to provide alternative content for users who do not have JavaScript active.
(Since JavaScript is likely enabled in your browser, the following box would normally be invisible to you.)
<noscript>
<p>This site works best with JavaScript enabled.</p>
<a href="static-version.html">View the static version of this page.</a>
</noscript>
View HTML Living Standard: The noscript element
Usage and Placement
- In the
<head>: When used in the head, it can only contain<link>,<style>, and<meta>elements. This is often used to load a fallback CSS file. - In the
<body>: It can contain any flow content (paragraphs, links, images, etc.). - Restrictions: The
<noscript>element must not be used in XML documents.
WCAG Principle: Robustness
Success Criterion 1.1.1 (Non-text Content): While this criterion usually applies to images, the spirit of providing "text alternatives" applies to interactive functionality as well.
If your website relies on JavaScript to show critical information (like a dynamic chart or a search interface), you should use <noscript> to provide a static equivalent or instructions on how to access the information without scripts. This ensures that the content remains perceivable and robust across different technical configurations.
Noscript vs. Progressive Enhancement
Modern web design emphasizes **Progressive Enhancement** over the "Noscript as a Warning" approach.
- The Warning Approach: Using
<noscript>to tell users "This site won't work without JS." This is often a poor user experience. - The Enhancement Approach: Building the page so that basic functionality works with pure HTML/CSS, then using JavaScript to add "layers" of interactivity. In this model,
<noscript>is used to provide the specific pieces that cannot be built statically.
A11y Tip: SEO and Privacy
Users disable JavaScript for many reasons: security, privacy (blocking trackers), bandwidth saving, or because they are using specialized browser environments. Providing a meaningful <noscript> experience ensures you don't exclude these user segments and helps search engine crawlers index your content more effectively.