How to Disable a HTML Anchor Tag

In this post, we'll learn how to disable a HTML anchor tag using CSS or inline JavaScript.
Disable HTML Anchor Tag with CSS
The best way to disable a link tag is by using the CSS property pointer-events: none;
. When you apply pointer-events: none;
to any element, all click events will be disabled.
Because it applies to any element, you can use it to disable an anchor tag.
Here's how to use pointer-events: none;
inline to disable a link tag:
<a href="https://sabe.io" style="pointer-events: none;">Sabe.io</a>
Alternatively, you can use CSS classes and separate the CSS:
<style>
.disable-link {
pointer-events: none;
}
</style>
<a href="https://sabe.io" class="disable-link">Sabe.io</a>
By using a CSS class, you can disable multiple anchor tags at once.
If you really wanted to, you could even disable all anchor tags on a page by targeting the a
tag:
<style>
a {
pointer-events: none;
}
</style>
<a href="https://sabe.io">Sabe.io</a>
Disable HTML Anchor Tag with JavaScript
If you don't want to use CSS, you can also disable a link tag by using inline JavaScript.
Here's an example of a link that is disabled using JavaScript:
<a href="javascript:void(0)">Sabe.io</a>
If you try clicking on this link, it won't work, thereby disabling the link.
Conclusion
We've seen how to disable a link tag using CSS or JavaScript. We've also seen how to disable multiple anchor tags at once.
Hopefully, you've found this post helpful!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on X! You can also join the conversation over at our official Discord!
Leave us a message!