HTMLでリンクを設置するときの「別タブで開く」設定。
「元ページを開いたままリンク先を見せたい」
「外部サイトへのリンクは別タブにしたい」
こういったシーンで活用できます。
今回は、HTML初心者向けに、リンク先を別タブで開く書き方と注意点をご紹介します。なんとなく使っている方も、意味をきちんと理解することで、さらに使いこなせるようになります。
目次
別タブで開くにはtarget="_blank"を使う
HTMLでリンクを別タブで開くには、aタグのtarget属性に"_blank"を指定します。
<a href="https://example.com" target="_blank">別タブで開くリンク</a>
この書き方で指定すれば、ユーザーがリンクをクリックした際、現在のタブを維持したまま新しいタブでリンク先が開きます。
リンク先の表示先を指定する書き方いろいろ
HTMLのリンクでは、target属性を使ってリンク先の表示先を指定できます。それぞれ書き方を解説します。
同じタブで開く（指定無し）
特にtarget属性を指定しなければ、リンクは同じタブで開きます。これはHTMLのデフォルト動作です。
<a href="https://example.com">同じタブで開くリンク</a>
ユーザーがリンクをクリックすると、現在のタブのページが切り替わります。
別タブで開く
リンクを別タブで開くには、target="_blank"を使います。先ほど冒頭で説明した書き方です。
<a href="https://example.com" target="_blank">別タブで開くリンク</a>
この指定により、現在のタブはそのまま残り、新しいタブでリンク先が開きます。
別ウィンドウで開く
任意のウィンドウ名を指定することで、別ウィンドウで開きます。
<a href="https://example.com" target="newwindow">別ウィンドウで開くリンク</a> ここでのtarget="newwindow"は、あくまで一例です。
rel="noopener noreferrer"は書くべき？
リンクを別タブで開く際によくセットで使われるrel="noopener noreferrer"属性について解説します。
rel="noopener noreferrer"とは？
元のページをJavaScriptで操作できないようにするための安全対策です。フィッシング詐欺などのリスクを減らす役割があります。
たとえば、別タブで悪意のあるリンク先を開いたとき、元ページを勝手に操作されて偽サイトに誘導されるようなリスクを防いでくれるわけです。
リンク元のURL情報（リファラー）を相手ページに渡さない設定です。プライバシー保護の役割です。
書く必要はあるの？
結論からいうと、2025年現在、ほとんどの場合書かなくても問題ないです。
最近の主要ブラウザはtarget="_blank"で自動的にnoopenerを有効にしているため、セキュリティ上は必須ではなくなってきています。
ただし、古いブラウザへの対応や万全を期すために書いておいてもOKです。
noreferrerについても、リファラーを渡したくない理由がないなら、省略しても大きな問題はありません。
別タブで開くかどうかの判断の目安
リンク先を「別タブで開くか同じタブで開くか」は、ユーザー体験（UX）の観点から判断するのが望ましいです。ここでは目安となる事例をいくつかご紹介します。
別タブで開くのが望ましいケース
よくあるシーン別だと、このようにまとめられます。
| 外部ページ（他社サービスなど） | ユーザーがサイトに戻りやすくなる |
| PDFなどのファイルリンク | 閲覧後に元のページに戻りやすい |
| 入力フォーム中の補足情報リンク | 入力内容を保持したまま、別タブで情報を確認できる |
特にフォームの補足情報は別リンクの方が親切でしょう。フォームに内容が記憶されるならいいですが、最初から再入力が必要になると、非常に煩わしいですよね。
別タブで開かない方がいいケース
必ずしも別タブで開くのが正しいとは限らないです。以下のように通常のサイト内リンクであれば、かえって不便な印象を与えてしまうからです。
| 同一サイト・ドメイン内のページ | 複数タブが開いて煩わしさを感じさせてしまう |
| 戻るボタンで容易に戻れる場面 | ユーザーが自分で操作できる範囲を尊重した方がいい |
「リンクを設置するページとその先のページの関係性」によって柔軟に判断しましょう。自分がユーザーならどちらの方が親切かを基準に考えてみるといいですね。
まとめ
HTMLでリンク先を別タブで開く書き方についてご紹介しました。
リンクを別タブで開くには、target="_blank"属性を使いますが、別タブで開くかどうかはユーザー体験を考慮した判断も必要です。
外部サイトやPDFファイル、入力フォームの補足情報などは別タブが適していますが、同じサイト内のページ遷移では、同じタブで開く方が混乱を避けられます。
リンクの開き方は、サイトの内容やユーザーの利便性に合わせて柔軟に使い分けるといいでしょう。
WordPressテーマ集
コメント