How to disable an anchor tag in HTML

Sometimes we may need to disable an anchor tag in HTML. There are so many ways to disable the `a` tag but in this article we will explain to you the three different methods with examples to disable the anchor tag.

Checkout more articles on JavaScript

• Reverse a String in JavaScript
• How to use a variable in Regular Expression pattern in JavaScript
• How to sort an array of objects in a specific order in JavaScript
• typeof operators in JavaScript
• Scroll to a specific element using JavaScript

Three different ways to disable an anchor tag

1. Using CSS
2. Using Inline JavaScript
3. Using click event

1. Using CSS

The `pointer-events: none` CSS style can be used to deactivate an HTML anchor element.

All click events on the anchor element will be disabled if `pointer-events: none` is set.

    <title>How to disable an anchor tag in html - Clue Mediator</title>
    <style type="text/css">
        a.disabled {
          pointer-events: none;
          cursor: default;
          opacity: 0.7;
        }
    </style>



<h1>How to disable an anchor tag in html - Clue Mediator</h1>

<a href="https://www.cluemediator.com" class="disabled">Go to ClueMediator.com</a>

2. Using Inline JavaScript

Disable HTML anchor with inline JavaScript `href="javascript:void(0)"`.

    <title>How to disable an anchor tag in html - Clue Mediator</title>



<h1>How to disable an anchor tag in html - Clue Mediator</h1>

<a href="javascript:void(0)">Go to ClueMediator.com</a>

3. Using click event

Let’s bind the click event to `a` tag.

    <title>How to disable an anchor tag in html - Clue Mediator</title>



<h1>How to disable an anchor tag in html - Clue Mediator</h1>

<a href="https://www.cluemediator.com" onclick="return false;">Go to ClueMediator.com</a>

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂