<noscript>
Overview
The <noscript> element offers a means to provide alternative content or markup in scenarios where scripting is either not supported by the browser or has been turned off by the user. It ensures that users still receive valuable information or feedback even when JavaScript or other scripts aren't executed on the webpage.
Examples and Usage
The <noscript> element is commonly encountered in illustrative contexts to demonstrate how a web page behaves when scripting is turned off or unsupported. For our illustration, we've opted for a simple scenario that demonstrates the tag's core functionality.
Consider a website that uses JavaScript to dynamically display its main content:
<script>
document.write("Welcome to our interactive website!")
</script>
<noscript>
<p>It seems you have JavaScript disabled. To fully experience our site, please enable it. Meanwhile, check out our <a href="fallback-content.html">basic version</a>.</p>
</noscript>
When a user's browser supports and has JavaScript enabled, they'll be presented with the greeting: "Welcome to our interactive website!". If JavaScript is disabled or unsupported, the content inside the <noscript> tag will be displayed, guiding them to an alternative version of the content.
The following can be tested as so:
Copy the code provided and paste it into an online HTML editor like CodePen.
View the content with JavaScript enabled to observe the dynamic greeting.
Disable JavaScript (e.g., in Chrome):
- Press F12 to open Chrome's Developer Tools.
- Navigate to Settings (gear icon).
- Under the Preferences tab within Debugger, check "Disable JavaScript".
Lastly, reload the page. After disabling JavaScript, you'll notice the content defined inside the <noscript> tag. Similar steps can be followed in other browsers as well.
Our example offers a straightforward use of the <noscript> element; its practical integration in real-world scenarios, especially in complex web applications, might involve more nuanced structures and implementations.
Attribute Breakdown
The <noscript> element doesn't have any specific attributes; it uses the global attributes applicable to all HTML elements.
Accessibility Aspects
The <noscript> element doesn't have any direct ties with ARIA roles or aria-* attributes. While there aren't any specific accessibility considerations, <noscript> can help users, regardless of their scripting settings, receive relevant content or feedback from web pages.
Associated Elements
<script>
Additional Notes
The
<noscript>element is treated differently based on whether scripting is enabled or disabled when the parser processes the HTML document.Within the
<head>element, if scripting is disabled, the<noscript>tag can only containlink,style, andmetaelements.Outside of the
<head>, the<noscript>content model is transparent but must not have another<noscript>as an ancestor, preventing nested usage.The
<noscript>tag is not effective in XML documents and is exclusively meant for the HTML syntax.
Browser Compatibility
For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes | Yes* | Yes | Yes | Yes | Yes* |