1. Web Design
  2. HTML

Quick Tip: Don’t Forget the “noscript” Element

This post is part of a series called Strange and Unusual HTML.
HTML5 Form Validation With the “pattern” Attribute

JavaScript is a powerful language which brings websites to life with interactivity, until that dreaded moment when JavaScript is disabled in the browser, out of the blue. In this quick tip we’ll look at providing fallbacks with the <noscript> element.

No JavaScript

Users might disable JavaScript for a number of reasons. They might be doing so to cope with bandwidth constraints, to save their phone battery life, perhaps for privacy so they won’t be tracked with analytical scripts. A handful of people even install browser extensions like NoScript to prevent the browser from running JavaScript. Suffice it to say, if JavaScript is disabled, many websites and apps fail to function; if not completely, then partially.

Let’s look at some examples.

Tip: For the purposes of this tutorial I’m going to use Quick JavaScript Switcher, a handy extension for Chrome which allows me to toggle JavaScript in single click.

The new post editor is highly dependent on JavaScript. As you can see from the following screenshot, it displays nothing but the “W” WordPress logo when JavaScript is disabled. Assuming the majority of WordPress users might be non-tech-savvy, they’d probably be unaware of what is happening. post editor (December 11th, 2015).


Trello, a project management webapp, is highly dependent on JavaScript. Unlike, however, Trello kindly tells us with a simple warning:

Trello interface (December 11th, 2015)


Facebook handles this situation even better. It displays a notification, tells users what’s happening, and provides several courses of action with the logout and refresh button, and the option to resort to the mobile-optimized version. These are all presented with familiar Facebook visual branding.

Facebook (December 11th, 2015)


Some sites may use JavaScript only partially, such as blogs and news sites. When using NewYorkTimes, for example, you will find a couple of blank spots when JavaScript is turned off. The search icons which accompany the Search and the Sections links disappear, as seen below.

This is graceful degradation (users may not even notice), highlighting that it’s wise to deliver the best possible experience when JavaScript is turned off. 

Using the “noscript” Element

How we provide fallback will largely depend on how we deploy JavaScript on our websites, but the noscript element will come in handy in many instances. As the name implies, we can use noscript to render alternate content. Anything within <noscript></noscript> tags will render only when JavaScript is disabled.

To serve as an example I built a demo page. This demo replicates the blurred image loading effect as seen on Medium. The images and the blur effect are both delivered through JavaScript, so guess what happens when we turn off JavaScript?

The images will not be loaded.

To display these images, we can wrap them in noscript elements as well as wrapping the style declarations, addressing the positioning issues.

We can also use the noscript element to notify users about JavaScript being turned off—similar to what Facebook and Trello do. Additionally, we can add a reference link to help our users turn on JavaScript.

Wrap Up

Providing noscript as a fallback is a useful way of telling website users that, without JavaScript, things may not necessarily function 100%. But let’s not forget that your priority should be in making sure a lack of JavaScript (or CDN, or any one of a wealth of other dependencies) doesn’t break the user’s experience. Thanks to Christian Heilmann for making sure that message was conveyed.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.