aタグのリンクを無効にする方法【HTML/CSS/JavaScript】
<a>タグで実装したリンクを無効にする時は、下記のようにhref属性を外してtabindex="-1"を付けるのが最もシンプルかつデメリットもありません。
<!-- href=""を外してtabindex="-1"を付ける -->
<a tabindex="-1">無効化されたリンク（フォーカスも当たらない）</a>以下でこのコードの詳細を解説した上で、その他の手法についても説明します。
目次
aタグのリンクを無効にする時は、href属性を外す
リンクを無効にする方法はいくつかありますが、冒頭で述べた通りhref属性を外すのが最もおすすめの方法です。
「aタグでhrefが無いなんて見慣れないけど、OKなの？」と思われる方もいらっしゃるかもしれませんが、問題ありません。
実際、WHATWG（HTMLの標準規格を策定している世界的な組織。Apple、Mozilla、Microsoftなどから成る）によるHTMLの仕様書では、下記のように「href属性が無いaタグはプレースホルダーを表す」という旨が記載されています。
a要素がhref属性を持たない場合、その要素は、当該要素のコンテンツのみにより構成される、関連するリンクがあった場合、リンクが他の方法で置かれただろう場所に対するプレースホルダーを表す。
プレースホルダーとは、後で実際の中身を入れることを前提に、一旦仮の内容が置かれた場所のことです。今回の文脈なら、後で実際のリンクを入れるための仮置き要素ということになります。
前提として、aタグを残したままでリンクを無効化したい場合、通常それは暫定的な処置であるはずです（永続的ならaタグを残しておく理由が無いため、aタグ自体を削除するのが自然）。
つまり、リンクを無効化する手段としてhref属性を外すことは、HTMLの仕様に則った手法だと言えます。
他の方法と比べても手間がかかりませんし、デメリットもありません。ただし、tabindex="-1"でフォーカスが当たらないようにする必要はありますので、以下で解説します。
フォーカスが当たらないようにしたい場合はtabindex属性でマイナス値を指定する
href属性を外す代わりに追加するtabindex="-1"には、フォーカスを当たらなくする働きがあります。
href属性を外しただけだとフォーカスは当たる状態のままです。無効化したリンクにフォーカスが当たる必要は無いため、このようにtabindex属性で調整するのが望ましいです。（値はマイナス値であれば大丈夫ですが、通常は-1を使います）
厳密にはtabindex="-1"を付けてもJavaScriptでフォーカスを当てることはできますが、キーボードによる操作では当たらなくなるため、対ユーザーの観点では問題無いでしょう。
その他の方法でaタグを無効にする
href属性を外す以外にもリンクを無効化する手法はいくつかあります。以下で、CSSとJavaScriptのそれぞれによる無効化を解説します。
CSSによるリンクの無効化
CSSでリンクを無効にする場合は、pointer-events: noneを使います。
これを指定した要素は、クリックやホバーが無効になります。そのためリンクも動作しなくなるという仕組みです。
この方法もシンプルに実装できますが、コードを読めるユーザーにソースから直接URLを見られたり、検証モードでpointer-events: noneを削除してリンクを辿られたりする可能性があります。
また、クリックそのものが無効になるため、クリックイベントによって起動させるようなスクリプトにも使えなくなります。
さらに、一部の古いブラウザでは機能しない場合があります。
JavaScriptによるリンクの無効化
javascript:void(0)
JavaScriptでリンクを無効化する際は、javascript:void(0)がしばしば用いられます。
これはvoid(0)によってhref=""にundefindを渡すことで、結果的にリンクが動作しなくなるというものです。
<a href="javascript:void(0)">無効化されたリンク</a>href="javascript:void(0)"は、「a要素のクリックをきっかけにプログラムを作動させたいが、画面遷移はさせたくない」という状況の時に、onclick属性とともに使われることが多いように思います。
ただし、そのような使い方をする場合はそもそもaタグではなくbuttonタグなどを使う方が意味として適切なので、「aタグでマークアップしてJavaScriptでリンクを無効化する」という方法を採用する理由が考えづらいです。
広告の効果測定などの文脈では、既存のHTML要素をできるだけ変えずに済ますためかhref="javascript:void(0)"とonclick属性の使用が媒体から指示されることがありますが、このような特別な理由が無い限りは避けた方が望ましいでしょう。
preventDefault()
要素が持つデフォルトの処理を発生させないようにするメソッドであるpreventDefault()でリンクを無効にすることも可能です。
document.querySelector("対象のリンクを指定するセレクタ").addEventListener("click", (event) => {
event.preventDefault();
});上記のようにすることで、aタグのデフォルトの処理である「設定されたリンク先への遷移」を防ぎリンクを無効化します。
ただ、リンクのプレースホルダーを設けたい場合はhref属性の除外するのが適切で、クリックでイベントをハンドリングしたい場合はaタグ以外の要素が適切、というこれまでの議論を踏まえると、わざわざスクリプトを用意するメリットが考えづらいように思います。
disabled属性はaタグには使用不可
HTML要素を無効化するdisabled属性というものがありますが、aタグはサポート外のため使えません。
disabled 属性は、 <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea>, <input> が対応しています。
aタグのリンクを無効にする方法【HTML/CSS/JavaScript】：まとめ
aタグをリンクのプレースホルダー（後で実際のリンクを入れるための仮置き要素）にしたい場合は、下記のようにすることで簡単に実現できます。
<!-- href=""を外してtabindex="-1"を付ける -->
<a tabindex="-1">無効化されたリンク（フォーカスも当たらない）</a>a要素のクリックをイベントのトリガーとして扱いたい場合は、代わりにbuttonタグなど意味的に適切なものを使うのが望ましいですが、aタグを用いる必要性があればhref="javascript:void(0)"などで実現可能です。