Home/ Questions/Q 617231
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T18:24:45+00:00

Is there a HTML tag that does the opposite of <noscript> ? That is,

  • 0

Is there a HTML tag that does the opposite of <noscript>? That is, displays some content only if JavaScript is enabled? For example:

<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>    
<ifscript>

Of course <ifscript> doesn’t actually exist. I know I could achieve the same result by adding <h1> to the DOM using JavaScript, but if I’d prefer to do this with (X)HTML if possible.

Thanks,
Donal

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There the <script> is for. Just initially hide the particular piece using CSS and use JavaScript to display it. Here’s a basic kickoff example:

    <!doctype html>
<html lang="en">
    <head>
        <title>SO question 2297643</title>
        <script>
            window.onload = function() {
                document.getElementById("foo").style.display = 'block';
            };
        </script>
        <style>
            #foo { display: none; }
        </style>
    </head>
    <body>
        <noscript><p>JavaScript is disabled</noscript>
        <div id="foo"><p>JavaScript is enabled</div>
    </body>
</html>

    …or, with little help of jQuery ready() which is a tad sooner with displaying the content:

    <!doctype html>
<html lang="en">
    <head>
        <title>SO question 2297643 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#foo').show();
            });
        </script>
        <style>
            #foo { display: none; }
        </style>
    </head>
    <body>
        <noscript><p>JavaScript is disabled</noscript>
        <div id="foo"><p>JavaScript is enabled</div>
    </body>
</html>

    To improve user experience, consider placing the <script> call directly after the particular HTML element which needs to be toggled, so that there’s no “flash of content” or “element shuffle”. Andrew Moore has given a good example in this topic.

    Alternatively, you can do it (hacky) the other way round with <style> in <noscript>. This is syntactically invalid, but allowed by all browsers from IE6 and up, including the W3C-strict Opera:

    <!doctype html>
<html lang="en">
    <head>
        <title>SO question 2297643 with CSS in noscript</title>
    </head>
    <body>
        <noscript>
             <style>#foo { display: none; }</style>
             <p>JavaScript is disabled
        </noscript>
        <div id="foo"><p>JavaScript is enabled</div>
    </body>
</html>
    • 0