HTMLのtarget属性の使い方を徹底解説！リンクの開き方を制御する方法

target属性とは

target属性は、ユーザーがリンクをクリックした際に、そのリンクをどこで開くかを指定するためのHTML属性です。

例えば、以下のようなリンクをクリックすると、現在表示しているのと同じブラウザタブ（ウィンドウ）でリンク先のページが開きます。

<a href="https://techstacker.com/">トップページへのリンク</a>

つまり、別のウェブサイトへのリンクを設置した場合、ユーザーはあなたのサイトから離れ、リンク先のサイトへ移動してしまうのです。これは意図した挙動の場合もあれば、そうでない場合もあります。

デフォルトでは「_self」が設定されている

この挙動が起こるのは、<a>要素にはデフォルトで target="_self" という値が暗黙的に設定されているためです。これは「ユーザーが現在いる同じウィンドウでリンクを開く」という意味になります。

つまり、次のように書いたリンク要素は：

<a href="https://techstacker.com/"></a>

ブラウザには次のように解釈されています：

<a href="https://techstacker.com/" target="_self"></a>

コード上は見えないため混乱しやすいポイントですが、裏ではこのような処理が行われているのです。

リンクを新しいタブで開くには「_blank」を使う

リンクを新しいブラウザタブで開きたい場合は、デフォルトの _self を _blank に上書きします。

<a href="https://youtube.com" target="_blank" rel="noopener">
  これをクリックすると、YouTubeのサイトが新しいタブで開きます
</a>

_selfと_blankはどちらをいつ使うべき？

シンプルに答えるなら、ユーザーを自分のサイトから離したくない場合（SEO対策を考慮する場合など）は target="_blank" を使用しましょう。

逆に、サイト内のページ遷移などでユーザーをそのまま誘導したい場合は、何も指定しなくて構いません。リンクはデフォルトで同じブラウザウィンドウ（_self）で開かれます。

セキュリティのための「noopener」指定を忘れずに

重要： target="_blank" を使用する際は、セキュリティ上の理由から rel="noopener" を必ず併せて指定することをおすすめします。特に外部サイトへリンクする場合は必須と言えます。指定しないと、リンク先のページから元のページを操作される「タブナビング（Tabnabbing）」と呼ばれる攻撃を受けるリスクがあります。

noopener属性の詳細については、専用の解説記事を参考にしてください。