HtmlHow-ToBeginner · 4 min read

How to Disable Link in HTML: Simple Methods Explained

To disable a link in HTML, you can remove the href attribute or use CSS like pointer-events: none; to prevent clicks. Another way is to use JavaScript to stop the link's default action when clicked.

📐

Syntax

Here are common ways to disable a link in HTML:

Remove href attribute: The link looks normal but is not clickable.
Use CSS pointer-events: none;: This disables mouse interactions on the link.
Use JavaScript event.preventDefault(): Stops the link from navigating when clicked.

html

<a href="#">Normal Link</a>
<a>Disabled Link (no href)</a>
<a href="#" style="pointer-events: none; color: gray;">Disabled Link (CSS)</a>
<a href="#" onclick="event.preventDefault();">Disabled Link (JS)</a>

Output

Normal Link Disabled Link (no href) Disabled Link (CSS) Disabled Link (JS)

💻

Example

This example shows three ways to disable links: removing href, using CSS pointer-events, and JavaScript preventDefault().

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Link Example</title>
<style>
  .disabled-link {
    pointer-events: none;
    color: gray;
    text-decoration: none;
    cursor: default;
  }
</style>
</head>
<body>
  <h2>Disable Link Methods</h2>
  <p><a href="https://example.com">Normal Link</a></p>
  <p><a>Disabled Link (no href)</a></p>
  <p><a href="https://example.com" class="disabled-link">Disabled Link (CSS)</a></p>
  <p><a href="https://example.com" onclick="event.preventDefault();">Disabled Link (JS)</a></p>
</body>
</html>

Output

Page with four links: 1) Normal clickable link, 2) Link text not clickable (no href), 3) Gray link text not clickable (CSS disabled), 4) Normal looking link but clicking does nothing (JS disabled).

⚠️

Common Pitfalls

Common mistakes when disabling links include:

Removing href but not styling the link, so users think it is clickable.
Using pointer-events: none; without changing cursor or color, confusing users.
Using JavaScript preventDefault() but forgetting to handle keyboard accessibility.

Always make disabled links look visually different and consider accessibility.

html

<!-- Wrong: Link looks clickable but does nothing -->
<a href="#" onclick="event.preventDefault();">Click me</a>

<!-- Better: Add style to show disabled state -->
<a href="#" onclick="event.preventDefault();" style="color: gray; cursor: default;">Click me</a>

Output

First link looks normal but does nothing on click; second link looks gray with default cursor indicating disabled.

📊

Quick Reference

Method	How It Works	Visual Effect	Accessibility
Remove href	No link target, not clickable	Looks like normal text link	May confuse users if not styled
CSS pointer-events: none;	Disables mouse events	Grayed out, no pointer cursor if styled	Good if styled properly
JavaScript preventDefault()	Stops navigation on click	Looks normal unless styled	May block keyboard users if not handled

✅

Key Takeaways

Removing the href attribute disables the link but style it to show it is inactive.

CSS pointer-events: none; fully disables mouse interaction and should be combined with visual cues.

JavaScript preventDefault() stops navigation but requires extra care for accessibility.

Always make disabled links visually distinct to avoid confusing users.

Consider keyboard and screen reader users when disabling links.