#30DaysofHTML Day 16: < noscript >
Imagine there's no JavaScript...
Only a handful of people deliberately disable JavaScript in their web browser these days. However, events that result in no access to JavaScript still transpire: your multi-megabyte JavaScript file fails to download, CDNs go offline, someone’s corporate network blocks something, or network errors happen.
What happens if there is no JavaScript? What does your site visitor see? Sometimes, it's nothing at all... the White Screen of Death.
Now, clearly you should be a good enough programmer to have mechanisms in place to recover gracefully if something fails along the way. But as a final remedy, <noscript> is there to provide content when nothing else works.
Smashing Magazine does a great job of explaining these scenarios and examining major sites and their fallbacks for when there is no JavaScript.
Understanding <noscript>
It's pretty simple. <noscript> shows up on the page when JavaScript fails for whatever reason.
If JavaScript writes 100% of your page, then <noscript>'s content might be the only thing you'd see in JavaScript's absence.
If JavaScript writes less than 100% of your page, you'd see anything that doesn't rely on JavaScript to display, but the JavaScript effects would fail and any content placed in <noscript> would display instead.
<noscript>
<h2>Something bad happened</h2>
<p>You, dear user, did nothing wrong. But something failed, and the page did not load correctly.</p>
<!-- maybe tell the user what to do next? --> </noscript> When JavaScript is active, that text will not display.
Use <noscript> in the <head> or <body>
<noscript> may be used in the <head> of the document, not just the <body>. If you need different <link>, <style>, or <meta> tags if JavaScript doesn't load, you may include those there.
<head>
<noscript>
<!-- this CSS loads when all of the CSS I stuffed in my JavaScript doesn't -->
<link href="realcss.css" rel="stylesheet">
</noscript>
</head> Twitter is using <noscript>
As Smashing Magazine pointed out, Twitter uses <noscript> on their site. However, their implementation has changed since 2018, when the article was written. Visit Twitter in the browser of your choice and view source for a tweet or your feed. Lines 48-125 show a <noscript> implementation that include both embedded CSS and a little HTML. It’s a mini-web page inside of a web page!
Previously, according to the Smashing Magazine article, Twitter used a meta-refresh element inside of <noscript>:
<noscript>
<meta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2F">
</noscript>That implementation will redirect the user from the current page to whatever information you want the user to have when JavaScript isn’t available.
Accessibility considerations
<noscript> is indeed accessible, assuming its contents are also accessible. However, as WebAIM points out:
⚠️ <noscript> is an alternative to scripting, NOT an alternative for inaccessibility.
No <noscript> demo
It’s pretty straightforward, and there’s no real way to simulate turning off JavaScript in the CodePen environment that we’re aware of.
Challenge 1: Using <noscript>
👩🏽💻 Try today’s CodePen Challenge about the use of <noscript>. When you’ve completed it, post your answer in our discussion in Substack.
Challenge 2: The Science & Geekery Challenge!
🔬🥼🧪 We’ve reached the end of another unit! Try the big challenge using all of our Science and Geekery elements: <pre>,<code>, <kbd>, <samp>, <var>, <time>, and <noscript>! When you’ve completed it, post your answer in our discussion in Substack.
More information and examples
📚 Smashing Magazine: I Used The Web For A Day With JavaScript Turned Off