Noscript and progressive
Write fallback content with <noscript>.
What does noscript do?
Some users turn JavaScript off, or their browser cannot run it. The <noscript> tag gives the browser fallback content to show when JavaScript is absent. With JavaScript on, the content stays hidden; with it off, the content shows.
For instance, if a map widget runs on JavaScript, you can drop a static link inside <noscript>: 'Tap here if the map does not load.' It is a small but effective way to keep users off a half-broken page. Progressive enhancement builds on the same idea.
Where does noscript go?
Where <noscript> sits depends on what it holds. If it carries flow content like <p> or <a>, it goes inside <body>. If it holds head-level items like <link> or <meta>, it goes inside <head>.
A body-level noscript usually carries a notice or a fallback link. The point is to let the user do something without JavaScript. To prevent a full-page collapse, keep noscript near the important parts of the page.
Layers of progressive enhancement
Progressive enhancement thinks in three layers. The bottom layer is HTML: it presents content with structure and meaning, and works without JavaScript. On top comes CSS: look and layout. At the top sits JavaScript: interaction and animation.
Each layer builds on the one below but can also stand alone. If JavaScript fails, HTML and CSS still do their job; if CSS fails, HTML still reads. <noscript> is a concrete tool of this approach: when the top layer is off, it bridges down to the lower one.
Exercise Add a noscript fallback to a JS widget
Write a map widget skeleton inside body: a <div> with id="map-widget" holding a non-empty <p> (text 'Loading map'), immediately followed by a <noscript> tag. Inside noscript put an <a> link with a non-empty href (text 'Tap if the map does not load'). The link should go to the /map path.
Show example solution
<body>
<div id="map-widget">
<p>Loading map</p>
</div>
<noscript>
<a href="/map">Tap if the map does not load</a>
</noscript>
</body>Test yourself
-
When does noscript become visible?
- When JavaScript is on
- When JavaScript is off
- Only on mobile
- Only through CSS
Show answer
When JavaScript is off — Correct. noscript appears when JavaScript is off or fails to run.
-
Complete the noscript tag
<____>Fallback content shows when JavaScript is off.</noscript>Show answer
<noscript>Fallback content shows when JavaScript is off.</noscript> -
Match each concept to its role
- noscript
- Shows JS-free fallback
- Progressive enhancement
- HTML first, then layers
- Static HTML
- Works without JS
- Hydration
- JS wakes up HTML