Languages
[Edit]
EN

HTML - detect if JavaScript is disabled

4 points
Created by:
Giles-Whittaker
739

In this short article, we would like to show how to detect if JavaScript is disabled / blocked.

Quick solution:

<!doctype html>
<html>
<body>
  <noscript>
    If you see this text it means the JavaScript is disabled.
  </noscript>
</body>
</html>

Where <noscript> content will be displayed only if JavaScript is disabled or not available.

Screenshot:

<noscript> message example when JavaScript is disabled.
<noscript> message example when JavaScript is disabled.

Dirask message

In this section, you can find message displayed on Dirask when JavaScript is disabled.

<!doctype html>
<html>
<head>
  <style>
    
    body {
    	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    }
    
    div.message-block {
        padding: 14px 20px;
        border: 1px solid #d4bc08;
        border-radius: 7px;
        background: #f7df1d;
        text-align: center;
        line-height: 36px;
        color: #212121;
    }
    
    div.message-title {
        font-size: 18px;
    }
    
    span.message-marker {
        font-weight: 500;
    }
    
    div.message-description {
        font-size: 14px;
    }
    
  </style>
</head>
<body>
  <noscript>
    <div class="message-block">
      <div class="message-title"><span class="message-marker">JavaScript</span> is disabled!</div>
      <div class="message-description">to use the site features enable it.</div>
    </div>
  </noscript>
</body>
</html>

Note: to see the effect, copy source code into your website and disable JavaScript.

Screenshot:

Dirask message example when JavaScript is disabled.
Dirask message example when JavaScript is disabled.

 

Alternative titles

  1. HTML - check if JavaScript is disabled
  2. HTML - display message when JavaScript is disabled
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join