Shouldn't we use <noscript> element?

Asked 31/1, 2010 at 3:46 Answered 29/8, 2018 at 8:31

Solved javascript xhtml web-standards noscript

I found some good cons here:

The noscript element only detects whether the browser has JavaScript enabled or not. If JavaScript is disabled in the Firewall rather than in the browser then the JavaScript will not run and the content of the noscript element will not be displayed.
Many scripts are dependent on a specific feature or features of the language being supported in order for them to be able to run (for example document.getElementById). Where the required features are not supported the JavaScript is unable to run but since JavaScript itself is supported the noscript content will not be displayed.
The most useful place to use the noscript element is in the head of the page where it would be able to selectively determine what stylesheet and meta elements get applied to the page as the page is loading rather than having to wait until the page is loaded. Unfortunately the noscript element is only valid within the body of the page and so cannot be used in the head.
The noscript element is a block level element and therefore can only be used to display entire blocks of content when JavaScript is disabled. It cannot be used inline.
Ideally, web pages should use HTML for the content, CSS for the appearance, and JavaScript for the behavior. Using the noscript element is applying a behavior from within the HTML rather than applying it from JavaScript.

Source: http://javascript.about.com/od/reference/a/noscriptnomore.htm

I very much agree on last point. Is there a way to make and add an external <noscript> file? Should we place <noscript> in the <head>?

Constant answered 31/1, 2010 at 3:46 Comment(11)

Are there still Firewalls that disable javascript? I was behind one about 13 years ago, and it was awful even back then. My guess is that such a policy would not be possible these days, because about a third of the web would no longer be usable – Nonlinearity 13/11, 2010 at 21:19

noscript tag can be very well be used in head section of the page. – Peak 3/2, 2014 at 10:10

As others have mentioned, <noscript> element is allowed in <head> in latest specifications. – Berkshire 19/8, 2017 at 19:10

I had to choose what to do for a new website in limited time, so I'm opting for requiring JavaScript, since there is so much processing that seems impossible to do in just HTML and CSS. I hope all cell phones/mobile devices can run JavaScript. – Cynth 19/6, 2021 at 23:25

@David The fact that you have to “hope” indicates why this is a poor practice. Unless you’re doing something like Google Docs, which would be impossible without JS, it’s best to write something that will degrade gracefully and still work on any standards-compliant client. Usually the best way to do this is with progressive enhancement rather than starting by hoping that everyone supports JS. – Alkalimeter 16/9, 2021 at 14:26

I have to "hope" because standards compliance is not reliable across devices. I have no idea how to program a website using "progressive enhancement" nor do I wish to learn how. Why? Because it is hell on earth just to get a nice-looking web page programmed at all, even using B5! So long as NOSCRIPT is a valid element in HTML5 I see no reason not to use it the way it is usually used: to warn the user that JavaScript is required. And until there is a better way to program all sorts of necessary stuff for an ordinary HTML/CSS webpage, I will continue to require JavaScript. – Cynth 17/9, 2021 at 18:41

@DavidSpector The fact that standards compliance is not reliable is precisely why progressive enhancement is the only reliable way of doing what you’re talking about without relying on hope. Progressive enhancement is what makes it not hell on earth. I’m not sure why you want to remain ignorant of the exact solution for your problem, but if you want some info, start here: developer.mozilla.org/en-US/docs/Glossary/… – Alkalimeter 20/9, 2021 at 13:18

Also, a word of advice: generally when I hear people complaining about Web development being “hell on earth”, it’s because they haven’t properly understood either Web standards or the fundamental concepts of how the Web works. If you take the time to learn both those things, you will find Web development very consistent and logical. – Alkalimeter 20/9, 2021 at 13:27

I think I'm reasonably familiar with the Internet, Web, and the major standards. Yet I find that positioning each graphic element involves multiple levels of experimentation (the Hell On Earth part), particularly for the poorly-designed CSS language. I do not find Web development either consistent or logical, either. Your referenced page says practically nothing, but I will follow up by following its links when I have time. There is no panacea. – Cynth 21/9, 2021 at 15:18

@David Positioning graphic elements in HTML is mostly well-defined and straightforward. If you’re finding that it takes guesswork, maybe you need to structure your layout differently (hint: use the box model to position objects in reference to each other, not a lot of independent positioning). CSS does have a few missing features and is best used with a preprocessor such as Sass. There may be no panacea, but there are much more reliable approaches than it sounds like you’re taking. – Alkalimeter 7/10, 2021 at 22:5

It's better to have the default be non-javascript, and then let a javascript code overwrite with a javascript enabled page. Doesn't have to be much. Can just be a display:none; block, which is then set to display:block; by javascript, and vice versa for the non-js page.

Heindrick answered 31/1, 2010 at 3:58 Comment(11)

A display:block "your browser appears not to support JavaScript" which is set to display:none by Javascript is a viable alternative to NOSCRIPT, but you're losing the semantic information (robots don't know what you are talking about). – Sind 13/11, 2010 at 21:7

@Sind true, but you could add a meta-tag for the robots, I guess – Nonlinearity 13/11, 2010 at 21:16

@Sind yes, but what I mean is, you have a bunch of divs that are visible before your JS has removed them (for then to display them later at certain events). Whether or not the crawler sees them is irrelevant then, because they are part of the content, just not always visible for JS users. – Heindrick 13/11, 2010 at 23:23

To be sure this approach does not cause a flash of the non-javascript version when javascript is enabled, see #3222061 for how to avoid the flash. (Uses javascript in head tag to hide HTML tag, because that tag exists BEFORE the body is read. Then show again when document is ready.) – Humor 12/8, 2014 at 2:13

You mention it's better.... Why is it better than <noscript> tags? – Normie 24/9, 2014 at 14:6

@cale_b If you read the original post, you'll see a whole list of reasons. – Heindrick 10/10, 2014 at 15:2

If you set something to "display: none" via JS after on document ready you are going to have a blink on page open. The fallback elements are visible for a fraction of a second. That's pain. The native noscript tag doesn't blink. I have no idea how to remove the blink otherwise. – Gilroy 7/2, 2017 at 12:53

You don't even have to do it on document ready. Just do it inline script. (<div noscript></div><div myscript><script>noscript.hide, myscript.show</script> content goes here .... </div>)... as an example. – Heindrick 6/3, 2017 at 10:39

Anything that is hidden by default, that requires client scripting to view is to me a very dangerous proposition. I think I like the original purpose for the noscript tag which is display the page and any scripting as normal but alert the end user if javascript is disabled via noscript. This tag can be in the header btw and have CSS or links that show messaging, reroute via meta or links, etc. – Kosaka 20/8, 2017 at 1:8

@Kosaka Why is it dangerous to you? Yes it needs the client to have js enabled, but thats the whole point of it. (To only show content which needs js to users who have js enabled.) – Didst 18/6, 2018 at 22:1

It is dangerous to have HTML content ever display because of scripting. The original content and HTML should show by default regardless of scripting dependencies. The original idea behind noscript as an element was to only appear when scripting is disabled in the browser. By REVERSING that concept and now having content and noscript triggered by explicit scripts you remove the native display of these elements without scripts. – Kosaka 4/9, 2018 at 21:11

After pondering for many days and changing my code back and forth, I think I have clearer picture now and would like to share my two cents worth on the subject before I forget.

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

Depending on the situation, there are three cases for consideration:

Case 1 - If required script is inline

JavaScript disabled

Content in <noscript> element appears immediately, non-js content is shown
Content in <div> element appears immediately, non-js content is shown

JavaScript enabled

Content in <noscript> element does not appear at all, js content shown
Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <noscript> element is advantageous.

Case 2 - If required script is from external (third-party) source, but hiding of `<div>` element is done with inline script

JavaScript disabled

Content in <noscript> element appears immediately, non-js content is shown
Content in <div> element appears immediately, non-js content is shown

JavaScript enabled but required script is blocked

Content in <noscript> element does not appear at all, nothing is shown!
Content in <div> element may momentarily appear before being hidden, nothing is shown!

JavaScript enabled and required script is received

Content in <noscript> element does not appear at all, js content shown
Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <noscript> element is advantageous.

Case 3 - If required script hides the `<div>` element

JavaScript disabled

Content in <noscript> element appears immediately, non-js content is shown
Content in <div> element appears immediately, non-js content is shown

JavaScript enabled but required script is blocked

Content in <noscript> element does not appear at all, nothing is shown!
Content in <div> element appears, non-js content is shown

JavaScript enabled and required script is received

Content in <noscript> element does not appear at all, js content shown
Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <div> element is advantageous.

In summary

Use <noscript> element if rendering of the HTML content depends on third-party scripts or if the required script is inline. Else, use <div> element and make sure that the required script contains:

document.getElementById('noscript').style.display='none';

Mesh answered 7/5, 2012 at 9:55 Comment(1)

Inline script elements seem to be disliked by security people and CSP. Apparently they can be used for some sort of injection attacks. They want all script to be in separate files, not sure why. – Cynth 19/6, 2021 at 23:21

Although Tor Valamo has an elegant answer to this problem, there is an issue which may cause you to opt out of using this technique.

The problem is (usually) IE. It has the tendency to load and execute the JS a bit slower than other browsers causing it to sometimes flash the "Please Enable Your Javascript" div for a split second before it then loads the JS and hides the div.

It is annoying and to get around this you can implement the "classic". <noscript> redirect approach.

<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>

This is the most solid technique that I've come across with regards to this little nasty.

Brazil answered 18/8, 2011 at 10:46 Comment(3)

As long as you redirect to a page that still provides the same functionality and information in other ways. Otherwise, this is really, really annoying. – Vengeance 16/2, 2012 at 17:51

See #3222061 for how to avoid the flash. (Uses javascript in head tag to hide HTML tag, because that tag exists BEFORE the body is read. Then show again when document is ready.) – Humor 12/8, 2014 at 2:12

I tested this with a chrome extension thats blocks JS and doesn't work ( no redirect ) , disabling only JS from browser's settings works. Not best solution – Stinkpot 26/11, 2018 at 9:26

One useful application for noscript that I've seen is for a progressively-enhanced async loading of heavy content (especially "below the fold"). Big images, iframes, etc. can be wrapped in noscript in the HTML source, and then the unwrapped elements can be appended to the page using JavaScript after the DOM is ready. This unblocks the page and can make for a much quicker initial loading experience, especially if your interface relies on JS/JQ interactions applied after the document is ready (2 seconds vs. 6 seconds for a portfolio page I consulted on).

Herrmann answered 27/11, 2012 at 13:17 Comment(0)

These days it seems almost every browser runs Javascript, but you can never know who is going to be accessing your site. These days even screen readers and web crawlers use Javascript, and sometimes make AJAX requests if they have to.

That said, if you're going to fall back to no-Javascript, there is a much better way than a <noscript> tag. Simply do this in the HEAD of your document:

<script type="text/javascript">
    document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>

With this technique, you can easily refer to the Q_js class in your CSS to hide things. With the <noscript> tag, the best you can hope for is to include an additional CSS file to override previous CSS. This becomes important when some elements with static content are supposed to be hidden right away (not flicker) until Javascript can make them more dynamic.

In short, the technique I suggested addresses all your cons 1-5, and I believe it's strictly better than using <noscript>.

Sammons answered 9/6, 2015 at 23:19 Comment(2)

Usage of JS by web crawlers is quite restricted still. Hiding things with JS produces a blink. – Gilroy 7/2, 2017 at 13:33

It only produces a blink if your javascript is loaded after the elements. This is not hiding elements, it is adding a class to their container with Javascript added in the <head>, which is loaded before any of those elements! – Sammons 7/2, 2017 at 14:45

In the (hopefully near) future you will be able to use css @media scripting:

@media (scripting: none) {
    /* styles for when JS is disabled */
}

Noeminoesis answered 17/6, 2018 at 21:40 Comment(0)

I create a full height, full width, position:fixed div in all pages with some id .

<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){




});

I am not an expert . This worked for me . I am sorry but, this case will suit only if you want the user to have his javascript enabled always

Sadiras answered 17/5, 2013 at 7:19 Comment(1)

$('#noscript_div').hide(); will not fire if jquery fails somehow – Blakney 29/7, 2014 at 11:57

the simple ideea is in this times your website may adapt to no javascript usage on slow devices using noscript tag like an entity for the entire content of your website**(your html should be prepared to no javascript and all controls must work also if javascript is off,users using basic html controls shoul be able to do everything they done before when javascript was active.So <noscript></noscript> can be the dynamic switch to the same content in other way with the same results=solving the problem wich is the reason the users open your url).**You can see is no matter javascript is or not present ,the website's functionality can be "the same" in any cases js enabled / disabled.On chinese slow devices eg:Samsung neo mini phone this method can run an website without any delays on low internet traffic.. try to run this auto double functionallity website if js is on/off cases:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
    $('noscript').replaceWith(function() {
        return this.textContent || this.innerText;
    });
    $("p#javascripton").css("background-color", "yellow"); 
    $("p").click(function(){
        $(this).hide();
    });
}); 
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>

and to say more on this .. right noscript was invented to work like a trigger when js is disabled but you can work around this feature to change the course of internet functionality about how is now ,to change it's dynamics....

Johst answered 12/1, 2016 at 23:4 Comment(0)

Like all things, use the right tool for the job.

If you are using Google Maps API, you have a static image via tag and that gets replaced with dynamic JS map. Google have recently started charging for everything thus with the above example it's going to cost you twice, once for static and once for dynamic. The static map is only relevant if JS is disabled. Therefore to save double paying it seems to me the best solution is to wrap the tag for the static map in a tag.

Butch answered 29/8, 2018 at 8:31 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Case 1 - If required script is inline

Case 2 - If required script is from external (third-party) source, but hiding of <div> element is done with inline script

Case 3 - If required script hides the <div> element

In summary

Recommended topics

Hot tags

Case 2 - If required script is from external (third-party) source, but hiding of `<div>` element is done with inline script

Case 3 - If required script hides the `<div>` element