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:
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>
Output:
Output
Share your thoughts in the comments
Please Login to comment...