HTMLでリンクを別タブ・別ウィンドウで開く

リンクを別タブで開くには、aタグにtarget="_blank"を付けます。あわせてrel="noopener noreferrer"を指定するのが安全な書き方の定番です。

target="_blank"とは - 別タブで開く指定

target属性は「リンク先をどこに表示するか」を指定するaタグの属性で、_blankを指定するとリンク先が新しいタブ(環境によっては新しいウィンドウ)で開きます。この開き方は「別窓で開く」と呼ばれることもあります。

タブとウィンドウのどちらで開くかはブラウザ側の設定に依存し、HTMLからは強制できません。現在の主要ブラウザでは新しいタブで開く動作が一般的です。

別タブ・別ウィンドウで開く書き方

href属性の後ろにtargetとrelを追加するだけです。次のコードはそのまま動きます。

<a href="https://example.com/" target="_blank" rel="noopener noreferrer">別タブで開くリンク</a>

クリックすると新しいタブでリンク先が開き、元のページはそのまま残ります。

target属性の値(_blank/_self)の使い分け

target属性でよく使う値は、次の2つです。

値 動作
_blank 新しいタブ(または新しいウィンドウ)で開く
_self 同じタブで開く(省略時の既定値)

外部サイトへのリンクは_blank、自サイト内の移動はtargetを書かず既定の_selfのまま、というのが使い分けの目安です。_parentや_topという値もありますが、iframeを使ったページ以外では出番がありません。

rel属性の指定 - noopener/nofollowで安全に

rel属性とは、リンク先と現在のページの関係をブラウザや検索エンジンに伝える属性です。target="_blank"と組み合わせる場合、セキュリティ対策としてnoopenerの指定が推奨されます。

target="_blank"とあわせてよく使う値は、次の3つです。

値 働き
noopener 開いた先のページからwindow.openerで元のページを操作されるのを防ぐ
noreferrer 参照元(リファラー)情報をリンク先に送らない。noopenerの効果も含む
nofollow リンク先を推奨しないことを検索エンジンに伝える

noopenerがないと、開いた先のページが元のページを偽サイトに差し替える攻撃(タブナビング)につながる恐れがありました。現在のブラウザはtarget="_blank"に自動でnoopener相当の動作を適用しますが、古い環境も考慮して明示しておくと確実です。

HTMLでリンクを別タブ・別ウィンドウで開く方法に関するよくある質問

リンクが別タブで開かず、同じタブで開いてしまうのはなぜですか?

target="_blank"のつづり間違いや、引用符の閉じ忘れが典型的な原因です。記述が正しい場合は、JavaScriptがクリック処理を横取りしていないか、baseタグのtarget指定が上書きしていないかも確認してください。

すべてのリンクをまとめて別タブで開けますか?

headタグ内に<base target="_blank">を書くと、ページ内の全リンクの既定値を_blankにできます。ただしページ内リンクまで別タブになるため、使いどころには注意が必要です。

noopenerとnoreferrerの違いは何ですか?

現在の主要ブラウザは、target="_blank"を指定すると自動でnoopener相当の保護を適用します。それでもrel指定を書くのは、古いブラウザへの対応と挙動の明示のための慣習です。