noscript (HTML element)

Description

The noscript element has but one purpose: to provide content for people accessing the web page with a browser that either doesn’t support client-side scripting, or that has had its script support disabled by the user, perhaps for security reasons. Inside noscript you can use the same HTML elements that you’d include the body element; for example, headings, paragraphs, and other elements which are appropriate to the doctype that you specify. However, you can’t use noscript inside the head to provide alternatives for JavaScript functions, as that would involve writing content inside the head element.

Note that it’s not just humans who might benefit from noscript content. If you have a web page that uses client-side scripting to create navigation, for example, those links will be all but hidden from search engines, which won’t parse the scripts contained in the script element. A simplified navigation block within the noscript element can provide a route for search engines to follow when they’re indexing your site, regardless of whether the users ever see that content.

There’s one gray area that you should be aware of. The content inside the noscript will only appear if scripts aren’t supported, or are disabled in the user’s browser. There are various scenarios in which a script won’t be actioned—for example, when security settings on a firewall detect potentially malicious code in an external script file, and block the scripts. This kind of situation may cause a page to render improperly, but noscript won’t be shown, because in this case scripts are supported, it’s just that some have been blocked.

Another problem with noscript is that it is version agnostic, that’s to say that a device/browser may be script capable at some level but noscript does not know what level that is., The result is that the browser/device will not render the content inside the noscript element because it thinks it’s more than able to do this while other scripts on the page may be delivered using a specific language version which the browser or device is not able to deal with. Caught between a rock and a hard place, as the saying goes.

The solution? Don’t rely on noscript completely - or even at all. It may be better simply to create a message on the page in clear text—for example, in a div with an id (to uniquely identify the element). Then, use the scripting capability to check that the script’s functions, variables, and objects have been successfully loaded and work properly. If all the conditions are met, use scripting to retrospectively remove or update the content of that message. If the part of the script that performs the magic fails to make it through the firewall, so will the ability to remove that warning message.

Use This For …

Providing alternative content for users when scripts aren’t supported or have been disabled. Typically this may be simply to provide a pointer to show users how they can resolve the problem, or alternatively, to provide a simplified version of the content that would have appeared if scripting were enabled (although that approach brings with it the issue of maintaining two versions of your markup).

Compatibility

Every browser listed supports this element type.