実行できるHTMLドキュメント: リンクを別タブで開く

Q: HTML でリンクを新しいタブで開くには？

タグに target="blank" を追加します: Example 。ブラウザは新しいタブでページを開き、現在のページも開いたままにします。

Q: target="_blank" に rel="noopener" はまだ必要ですか？

現在の Chrome、Firefox、Safari は target="_blank" のリンクに自動で noopener を適用するので、新しいページが window.opener を通じて元のページにアクセスすることはできません。rel="noopener" を書いても損はなく、古いブラウザの訪問者を守れるので、多くのスタイルガイドは今も書くよう求めています。

Q: noopener と noreferrer の違いは何ですか？

noopener は 2 つのタブのつながりを切ります (新しいタブでは window.opener が null になります)。noreferrer はそれに加えて、元のページの URL をリファラーとして送らないようにするので、相手のサイトのアクセス解析では直接の訪問として記録されます。

Q: HTML でリンクをタブではなく新しいウィンドウで開けますか？

できません。target="_blank" は新しい閲覧コンテキストを求めるだけで、タブかウィンドウかはブラウザとユーザーの設定で決まります。現在のブラウザはタブで開きます。

Q: ページ内のすべてのリンクを新しいタブで開くには？

に を書きます。自分の target を持たないすべてのリンクが新しいタブで開くようになります。フォームにも影響するので、本当にそうしたいページでだけ使いましょう。

target="_blank" でリンクを新しいタブで開く

リンクに target="_blank" を追加します。ブラウザはリンク先を新しいタブで開き、元のページはそのまま残します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

方法はこれだけです。<a> に target="_blank" を付け、次に説明する rel="noopener" も付けます。読み手は Ctrl+クリック (Mac では Cmd+クリック) や中クリックで、どのリンクでも自分で新しいタブで開けます。そのため target="_blank" は、入力途中のフォームや再生中の動画など、ページを離れると読み手が何かを失う場合だけに使いましょう。

このページのプレビューは、例のフレームが別のページに移動してはいけないので、target の有無に関係なく外部リンクをすべて新しいタブで開きます。target による違いを確かめるには、例をファイルとして保存してブラウザで開いてください。

rel="noopener" と rel="noreferrer"

以前は target="_blank" で開いたページが window.opener で元のページへの参照を持ち、それを使って元のタブを別の URL (偽のログインページなど) に移動させることができました。rel="noopener" はこの参照を取り除きます。

`rel` の値	新しいタブの `window.opener`	新しいサイトへのリファラー送信
なし (古いブラウザ)	元のページ	あり
なし (現在のブラウザ)	`null`	あり
`noopener`	`null`	あり
`noreferrer`	`null`	なし
`opener`	元のページ	あり

現在の Chrome、Firefox、Safari は、rel="opener" と書かない限り、target="_blank" のリンクをすべて noopener として扱います。それでも rel="noopener" を書いておくと、古いブラウザの訪問者を守れ、コードからも意図がわかります。

noreferrer はリファラーの送信も止めるので、リンク先のサイトには訪問者がどのページから来たのかがわかりません。これはセキュリティではなくプライバシーの選択です。自分の URL を知られたくないときに使い、アクセス元を知る必要のある提携先には付けないようにしましょう。

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel はスペース区切りで複数の値を受け付けるので、noopener は SEO 用の値と組み合わせられます。有料のリンクには rel="noopener sponsored"、内容を保証しないリンクには rel="noopener nofollow" を使います。

新しいタブで開くことをユーザーに伝える

予告なく新しいタブが開くと、特にページが変わったことに気づきにくいスクリーンリーダーの利用者は混乱します。リンクの中でそのことを伝えましょう。目で見る人には小さなアイコンで、スクリーンリーダーの利用者には非表示のテキストで伝えます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

a[target="_blank"] セレクタは、新しいタブで開くすべてのリンクに自動で矢印を付けるので、付け忘れがありません。非表示の span はリンク名の一部として「accessibility guidelines (opens in a new tab)」と読み上げられますが、画面上では場所を取りません。

外部リンクすべてに自動で印を付ける

属性セレクタを使うと、href でリンクにスタイルを付けられます。この例では http で始まるリンクすべてに矢印が付き、サイト内のリンクには付きません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= は「で始まる」という意味です。セレクタはリンクにスタイルを付けるだけなので、target と rel 属性は HTML に書く必要があります。

target の値

target はリンクを開く場所を指定します。キーワードは 4 つあり、それ以外の値は名前として扱われます。

`target`	リンクを開く場所
`_self`	同じタブまたはフレーム。これが初期値です。
`_blank`	名前のない新しいタブ
`_parent`	現在のフレームの親 (フレームの外では `_self` と同じ)
`_top`	すべてのフレームを抜けたタブ全体
任意の名前 (例: `help`)	その名前のタブまたはフレーム (なければ作られる)

名前付きの target は再利用されます。target="help" のリンクはすべて同じタブで開くので、ヘルプのリンクを 5 つクリックしてもタブは 5 つではなく 1 つです。<iframe> の中のリンクで、フレームではなくページ全体を置き換えたいときは _top を使います。

base 要素ですべてのリンクを新しいタブで開く

<head> に <base target="_blank"> を書くと、ページのすべてのリンクとフォームの初期の target が決まります。

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

リンク自身の target は <base> より優先されます。この方法はめったに使わないようにしましょう。すべてのリンクが新しいタブで開くページは使いにくいものです。

JavaScript で新しいタブを開く

window.open(url, '_blank') はスクリプトからタブを開きます。3 つ目の引数に 'noopener' を渡すと、rel 属性と同じ保護が得られます。その場合、window.open は新しいタブへの参照ではなく null を返します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

ブラウザは、クリックやキー入力への反応として実行されない window.open をブロックします。ページの読み込み時やタイマーの後ではなく、イベントリスナーから呼び出しましょう。リンク先が読み手に事前に見せられる URL なら、target="_blank" を付けたリンクのほうが簡単で、JavaScript なしで動きます。リンクそのものについては HTML リンクのページで解説しています。

よくある間違い

アンダースコアなしの target="blank"。 キーワードではなく名前です。最初は新しいタブで開きますが、同じ名前の他のリンクはすべてそのタブを再利用します。
target="_new"。 これもただの名前で、効果は同じです。再利用される 1 つのタブになります。
すべてのリンクに target を付ける。 サイト内のリンクは同じタブで開くべきです。新しいタブで開きたい読み手は、その方法を知っています。
新しいタブで開くことを示さない。 アイコンと非表示のテキストを追加しましょう。
提携先やアフィリエイトのリンクに noreferrer を付ける。 提携先に紹介が記録されない原因になります。

よくある質問

HTML でリンクを新しいタブで開くには？

<a> タグに target="_blank" を追加します: <a href="https://example.com" target="_blank" rel="noopener">Example</a>。ブラウザは新しいタブでページを開き、現在のページも開いたままにします。

target="_blank" に rel="noopener" はまだ必要ですか？

現在の Chrome、Firefox、Safari は target="_blank" のリンクに自動で noopener を適用するので、新しいページが window.opener を通じて元のページにアクセスすることはできません。rel="noopener" を書いても損はなく、古いブラウザの訪問者を守れるので、多くのスタイルガイドは今も書くよう求めています。

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

noopener は 2 つのタブのつながりを切ります (新しいタブでは window.opener が null になります)。noreferrer はそれに加えて、元のページの URL をリファラーとして送らないようにするので、相手のサイトのアクセス解析では直接の訪問として記録されます。

HTML でリンクをタブではなく新しいウィンドウで開けますか？

できません。target="_blank" は新しい閲覧コンテキストを求めるだけで、タブかウィンドウかはブラウザとユーザーの設定で決まります。現在のブラウザはタブで開きます。

ページ内のすべてのリンクを新しいタブで開くには？

<head> に <base target="_blank"> を書きます。自分の target を持たないすべてのリンクが新しいタブで開くようになります。フォームにも影響するので、本当にそうしたいページでだけ使いましょう。