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

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="/archive/" 
           onclick="return false">
            <p>GeeksForGeeks</p>
        </a>
    </div>
</body>

</html>

Output:

Output

Reffered: https://www.geeksforgeeks.org

HTML

Related
Why is HTML used in Web Pages ?
How to Hide a Value or Text from the HTML Input control ?
What is LitHTML ?
How to Generate Video from Images in HTML5 ?
How to Make Visited Link Unvisited in HTML ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	16