Disabled href tag

Href's lifetime subscription

Keeping the href attribute is a good practice for SEO and user experience. It's like keeping the phone line open, the calls just aren't going through:

<!-- Looks can be deceiving -->
<a href="#" class="disabled" tabindex="-1">Disabled Link</a>


JavaScript vs CSS: The showdown

Using onclick="return false;" only works when JavaScript has VIP access. On the flip-side, pointer-events: none; is a CSS bouncer kicking out unwanted interactions, no JavaScript required.

The href disappearing act

Simply removing href turns your link into an ordinary text, like Clark Kent. This affects accessibility and functionality. Keep the superhero persona!

The cursor gimmick

The cursor: default; style is like a "beware of the dog" sign, indicating non-interactive territory.

Disguising as 'disabled'

A class="disabled" is your secret code to efficiently enable/disable links. It's like a secret handshake among developers.

An eye on accessibility

Just like reserved parking spots, aria-disabled="true" tells assistive technologies about disabled links.

Changing disguises: The Dynamic UI way

For dynamic disabling, use JavaScript to add or remove the 'disabled' disguise:

// Transforming Clark Kent into Superman... or vice versa
document.getElementById("myLink").classList.toggle("disabled");


It's all about the looks

Change the look of disabled links to cue users. Maybe try the gray text, the partly visible look, or the not-allowed cursor signifying "you're not on the list".

Non-interactive links: A new identity

For a permanently non-interactive link, consider a new identity. Change it to <span>, <div>, or <p> for less confusion, enhancing the user experience.