How to Create HTML Link that does not Follow the Link ?

Last Updated : 03 Apr, 2024

An HTML link, a hyperlink, connects one web page to another. Users who click an HTML link are taken to the corresponding web page. Web developers can link to text, images, and other media using HTML links.

These are the following approaches:

Table of Content

Using the href Attribute with a Placeholder Value
Using the href Attribute with an Empty Value
Using the onclick Event Handler

Using the href Attribute with a Placeholder Value

This method uses the href property with a placeholder value, such as “javascript: void(0)“, to generate a link that does not redirect to a different page or URL.

Example: Creating an HTML link that doesn’t follow the link Using the href Attribute with a Placeholder Value.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Not a Link</title>
</head>

<body>
    <div class="conatiner">
        <a href="#">Not a Link</a>
        <a href="javascript:void(0)">Not a Link</a>
    </div>
</body>

</html>

Output:

Output

Using the href Attribute with an Empty Value

In this approach, we are using the href attribute left blank, resulting in a link that does not navigate when clicked.

Example: Creating an HTML link that doesn’t follow the link Using the href Attribute with an Empty Value

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Empty link</title>
</head>

<body>
      <h6>HTML link that doesn't follow the link Using
          the href Attribute with an Empty Value
      </h6>
    <div class="conatiner">
        <a href="">Empty link</a>
    </div>
</body>

</html>

Output:

Output

Using the onclick Event Handler

In this approach, when the link is clicked, this method executes JavaScript code via the `onclick` event handler. Returning false from the JavaScript function prevents the link’s default action.

Example: Creating an HTML link that doesn’t follow the link Using onclick Event Handler.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h6>Creating an HTML link that doesn't follow
          the link Using onclick Event Handler.
      </h6>
    <div class="conatiner">
        <a href="https://www.geeksforgeeks.org/" 
           onclick="return false">
            <p>GeeksForGeeks</p>
        </a>
    </div>
</body>

</html>