CODEWITHSUNDEEP
javascripthtmlnoscript
Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14737

Why should I use <noscript>?

Humor me a bit here.

Why would I use <noscript> in my pages? The alternative (at least, the one I use) is the Modernizr + no-js class combo that is utilized with (for example) the HTML 5 Boilerplate, and this has been sufficient in all use cases so far.

The only reason I can think of of using <noscript> is to conditionally load resource files when JS is not enabled (most probably, CSS overrides?). I'm not sure if there a way to do that JS-free without using <noscript>, but even that use case seems that it can be worked around of.

A lot of obvious answers below.

Yeah, <noscript> is used to conditionally show / hide HTML elements to the client when Javascript is not available. I know that. You know that. Everyone who works with HTML should most likely know that.

However, there are a lot of other ways to do the same thing, most of which are preferred over <noscript>. One is the html.no-js class that Modernizr switches, which I mentioned above.

So the idea behind the question is more of, is there anything that <noscript> can do for the web developer that is unique to it? That is, it's significant enough, but there's no other way to do it otherwise?

@Guffa below makes a good point with the advertisements.

Upvotes: 1

Views: 4514

Answers (6)

Matt
Matt

Reputation: 1307

The best use case I can think of for noscript is when you are trying to use javascript to delay loading of assets for page performance. Consider a simple image lazy-loader:

<style>
    .no-js .lazy-load { display:none }
</style>
<img data-src="/path/to/img.jpg" src="/placeholder.png" class="lazy-load">
<noscript>
    <img src="/path/to/img.jpg">
</noscript>
<script>(function ($) {
    // http://stackoverflow.com/a/488073/1459873
    function isScrolledIntoView(elem) {
        var $elem = $(elem);
        var $window = $(window);
        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();
        var elemTop = $elem.offset().top;
        var elemBottom = elemTop + $elem.height();
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
    function lazyLoad() {
        $('img.lazy-load').filter(function () {
            return isScrolledIntoView(this);
        }).each(function () {
            var $this = $(this);
            $this.attr('src', $this.data('src'))
                 .removeClass('lazy-load')
                 .addClass('lazy-loaded');
        });
    }
    $.ready(lazyLoad);
    $(window).on('load scroll resize', lazyLoad);
}(jQuery))</script>

If you try to hide the lazy-loaded image with css classes, the no-js fallback will still load the image.

Upvotes: 0

Alohci
Alohci

Reputation: 83125

If I recall correctly, one of the key use cases identified to justify its inclusion in HTML5 (as opposed to being classified as obsolete) was that it can be used with <meta http-equiv="refresh" ... inside of it so that if JS is unavailable the user gets automatically redirected to a non-JS version of the web site.

Upvotes: 3

Madao
Madao

Reputation: 3776

when the user's browser not support javascript or Javascript disabled. the element which in will show.

Upvotes: 4

Manishearth
Manishearth

Reputation: 16198

If you have a page with crucial JS in it, use noscript to let your users know that their JS is disabled and they need to enable it to view the page.

Upvotes: 1

Tarun
Tarun

Reputation: 1898

tag is use in case JavaScript of browser is disable. Content inside is only display when your browser JavaScript is not enable.

You can use it for warning messages like: 'Hye your JavaScript is disable."

Upvotes: 0

Guffa
Guffa

Reputation: 700800

Well, why should you? If you have no use for it, then just don't use it.

The noscript tag is often used for fallback in advertisments and visitor tracking. If the user has Javascript disabled, a plain image is loaded instead of running the script.

Upvotes: 7

Related Questions