How to Disable Links Using HTML and CSS Only?

To make an HTML anchor element (i.e. <a>) not clickable using HTML/CSS, you can do the following:

1. Use the "pointer-events: none" property to prevent it from receiving pointer events (such as mouse and touch events);
2. Set the tabindex attribute to -1 to skip TAB key navigation;
3. Add the aria-disabled="true" attribute to tell screen readers, etc. that the link is disabled.

For example:

<a href="#" tabindex="-1" aria-disabled="true">Foo</a>

a[aria-disabled="true"] { pointer-events: none; }

As an alternative, you may also create a <button> element that acts as a link with disabled attribute, and style it as a link visually. This won't require you to add an extra tabindex and aria-disabled attribute.

Disabling links like this can be useful in some instances, for example, such as the following:

• When a link is not yet available — if a link leads to a page or resource that is not yet available, it may be useful to prevent users from clicking on the link repeatedly and becoming frustrated when it does not work;
• When a link is not applicable — if a link is only applicable in certain circumstances, it may be useful to disable the link when those circumstances are not met. For example, a link to purchase a product may be disabled if the product is out of stock;
• When a link triggers an action — if a link triggers an action, such as submitting a form or performing an AJAX request, it may be useful to disable the link while the action is in progress. This can prevent users from clicking the link multiple times and potentially causing issues with the action.

It's worth noting that "disabling" a link using CSS is merely a visual effect and does not provide any real security. This might be useful in some cases (as mentioned above), however, if you need to prevent users from accessing a link, you should implement server-side authentication or access control mechanisms. The reason for this is that it might still be possible for users to click on the "disabled" link, for example, using the right-click context menu in some browsers, and choosing "Open Link in New Tab" or "Copy Link Address".