HTML <noscript> Tag
The <noscript> tag in HTML is used to define an alternate content section that is displayed to users when their browser does not support scripts or has scripting disabled. It is a crucial tag for accessibility and ensuring a fallback experience for users who might not be able to view your dynamic content. It is very important to note that this tag is not intended as a solution to use for browsers that support javascript but with specific error conditions in javascript, or slow javascript performance.
Syntax
<noscript>
Alternative content here
</noscript>
Attributes
The <noscript> tag does not support any specific attributes.
Example
<!DOCTYPE html>
<html>
<head>
<title>noscript Tag Example</title>
</head>
<body>
<p>This is content displayed even if Javascript is disabled.</p>
<script>
document.write("This text should only appear when JavaScript is enabled.");
</script>
<noscript>
<p>Your browser does not support JavaScript, or it's disabled. Please enable it or use a different browser to see dynamic content.</p>
<p>Alternatively, the content has not loaded yet.</p>
</noscript>
</body>
</html>
More Examples
Basic Fallback Message
The most common use case is displaying a simple message:
<script>
document.write("<h2>JavaScript is working!</h2>");
</script>
<noscript>
<h2>JavaScript is disabled or not supported.</h2>
<p>Please enable JavaScript to view the dynamic content.</p>
</noscript>
Providing Alternative Navigation
If your navigation relies heavily on JavaScript, a <noscript> tag can provide a basic link-based alternative:
<nav id="js-navigation">
<!-- JavaScript navigation elements will be inserted here -->
</nav>
<noscript>
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</noscript>
Informative message when JavaScript is required
<p> This content is visible even when javascript is disabled </p>
<script>
document.getElementById("loading").innerText = "JavaScript was loaded succesfully"
</script>
<p id="loading"> </p>
<noscript>
<p> JavaScript is required to view this page </p>
</noscript>
Displaying an image when javascript is not available
<script>
document.getElementById("js-image").innerHTML = "<img src='example.png' alt='JavaScript enabled image'>"
</script>
<div id="js-image"></div>
<noscript>
<img src="no-js.png" alt="JavaScript disabled image">
</noscript>
Browser Support
The <noscript> tag is supported by all major browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Accessibility: Always provide meaningful content within the
<noscript>tag to ensure users with disabled JavaScript can still use your website. - Not for Error Handling: The
<noscript>tag is not meant for handling JavaScript errors or browser incompatibilities. It’s specifically for cases where JavaScript is globally disabled or not supported. - Content Duplication: Avoid duplicating large portions of content; instead, provide essential information or navigation alternatives.
- Progressive Enhancement: Utilize the
<noscript>tag as part of a progressive enhancement strategy to ensure the basic functionality of your site is accessible without JavaScript. - SEO: Search engines will index the content within
<noscript>, but will not run the javascript. Make sure the content in this tag is useful. - Limited Use Cases: With JavaScript becoming increasingly prevalent and supported,
<noscript>is less commonly used for general content, but rather for special considerations. - Don't Rely on It: In modern web development, it's better to avoid relying on Javascript being completely disabled, and should be treated more like an exception, for example in specific low-end browsers or when specifically disabled by the user for security reasons.
- Alternative to Javascript: This tag is not an alternative to Javascript, it should be used to inform the user that there will be content missing. It should not include complex content since it will have less support in browsers.
- Do not hide content inside this tag: Since search engines also read it, any hidden content inside it might cause SEO problems.
- Avoid dynamic content: Avoid loading dynamic content inside this tag, since it might not load and cause confusion.
- Use a simple message: Use a simple message when Javascript is not supported and not try to create a "full featured" experience. The user should not expect much features when using a browser without javascript support.
- Avoid styling: Avoid specific styling that tries to emulate the javascript version of the page since this might fail and cause errors. Keep it very basic and simple.
- Consider the user: The message should be clear, concise and should provide possible options in case the user can enable javascript.
- Test: Always test your pages with javascript disabled to ensure that the message is clear.
- Do not use multiple tags: Using more than one tag is not recommended, although they do work, avoid having more than one
<noscript>tag in the same page for simplicity. - HTML5 Standard: This tag is part of the HTML5 standard.
- Do not use it for slow javascript: If your application is slow, this is not the solution, consider using techniques to avoid javascript slowdowns.
- Fallback for scripts that failed to load: In case a Javascript fails to load because of an error or slow connection,
<noscript>is not the solution since the browser will execute thenoscripttag. You should instead rely on standard error handling techniques in your scripts. - Use with JavaScript frameworks: When using javascript frameworks that require Javascript to render,
<noscript>can be used to provide a message that informs the user of the requirements. - No need to include in modern applications: In most modern web applications that rely on Javascript, there is no need to use this tag, and is only relevant when the developers expect that javascript can be disabled.
