Enjoy 20% off all plans by following our social accounts!
Quiz

How do you detect if JavaScript is disabled on a page?

Topics
BrowserJavaScript
Edit on GitHub

TL;DR

To detect if JavaScript is disabled on a page, you can use the <noscript> HTML tag. This tag allows you to display content or messages to users who have JavaScript disabled in their browsers. For example, you can include a message within the <noscript> tag to inform users that JavaScript is required for the full functionality of the page.

<noscript>
  <p>
    JavaScript is disabled in your browser. Please enable JavaScript for the
    best experience.
  </p>
</noscript>

Using the <noscript> tag

What is the <noscript> tag?

The <noscript> tag is an HTML element that provides an alternative content for users who have disabled JavaScript in their browsers. This tag is useful for informing users that certain features of the website may not work properly without JavaScript.

Example usage

Here is an example of how to use the <noscript> tag to display a message to users with JavaScript disabled:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Detection</title>
  </head>
  <body>
    <h1>Welcome to our website</h1>
    <noscript>
      <p>
        JavaScript is disabled in your browser. Please enable JavaScript for the
        best experience.
      </p>
    </noscript>
    <p>This content is visible to all users.</p>
  </body>
</html>

In this example, the message inside the <noscript> tag will only be displayed if JavaScript is disabled. If JavaScript is enabled, the content inside the <noscript> tag will be ignored.

Styling the <noscript> content

You can also style the content inside the <noscript> tag using CSS to make it more noticeable. For example:

<noscript>
  <style>
    .noscript-message {
      color: red;
      font-weight: bold;
    }
  </style>
  <p class="noscript-message">
    JavaScript is disabled in your browser. Please enable JavaScript for the
    best experience.
  </p>
</noscript>

In this example, the message will be styled with red text and bold font to make it stand out.

Further reading

Edit on GitHub
Previous
Next