HTML 入門

HTML リンク target 属性

HTML における target 属性は、リンクをクリックした後の挙動を制御するために使用されます。

具体的には、リンク先のドキュメントを「どこで」開くかを指定できます。デフォルトでは現在のタブやウィンドウで開かれますが、target 属性を使用することで、新しいタブや親フレーム、あるいは特定の名前が付いたフレームで開くことが可能になります。

これはユーザーエクスペリエンス（UX）において非常に重要です。例えば、外部リソース（他のサイトなど）へユーザーを誘導する際に、自サイトのページを閉じさせずにそのまま残しておくといった制御が可能になります。

1. target 属性を理解する

target 属性は <a>（アンカー）タグの内部で使用され、リンク先の URL を表示するコンテキスト（Context）を定義します。

この属性にはいくつかの特定の値を設定でき、値によって挙動が変わります。その中でも最も一般的、かつ重要な値が _blank です。

1.1 _blank 値（最も一般的）

_blank は、target 属性で最も頻繁に使用される値です。これはブラウザに対して、リンク先のドキュメントを「新しいタブ（またはブラウザの設定によっては新しいウィンドウ）」で開くよう指示します。

活用シーン： 外部サイトへのリンクを貼る際に非常に有効です。ユーザーが新しいコンテンツを探索している間も、自サイトのページを元のタブに保持しておくことができます。

<a href="https://www.example.com" target="_blank">Example.com を訪問する</a>

この例では、ユーザーがリンクをクリックすると、www.example.com が新しいタブで開かれ、現在のページ（リンクがあるページ）はそのまま元のタブに残ります。

1.2 その他の target 値：_self, _parent, _top

現代の Web 開発（特に「フレーム」技術の衰退）に伴い、_blank 以外の値を使用する機会は減っていますが、知識として理解しておくことは重要です。

  • _self
    • これはデフォルト値です。リンクを現在と同じコンテキスト（クリックしたページと同じタブ）で開きます。
    • グローバル設定を上書きする場合や、コードを明示的に分かりやすくする場合を除き、通常は記述する必要はありません。
<a href="https://www.example.com" target="_self">Example.com を訪問（現在のタブで開く）</a>
  • _parent
    • リンク先を「親フレーム」で開きます。現在のページが <iframe> などで入れ子になっていない場合は、_self と同じ挙動になります。主にフレームを使用した古い設計のサイトで利用されます。
  • _top
    • リンク先をウィンドウの最上位（ボディ）で開き、すべてのフレーム構造を解消します。フレーム内にいない場合は _self と同じ挙動です。これも主にレガシーなサイトで利用されます。

1.3 名前付きフレーム（Named Frame）の使用

target 属性には、<iframe> の name 属性の値を指定することもできます。これにより、ページの特定の <iframe> エリア内にリンク先をロードさせることが可能です。

これはページ構造を事前に設計しておく必要がある、少し高度なテクニックです。

<iframe src="about:blank" name="myFrame" width="400" height="300"></iframe>
<br>
<a href="https://www.example.com" target="myFrame">フレーム内に Example.com をロード</a>

2. 実戦例とデモンストレーション

様々なシナリオでの target 属性の使い方を見ていきましょう。

2.1 例 1：新しいタブで外部リソースを開く

HTML についてのブログを書いている際、Mozilla Developer Network (MDN) の公式ドキュメントにリンクを貼る場合を想定します。ユーザーがドキュメントを読んだ後に、簡単にあなたのブログに戻ってこれるよう target="_blank" を使用すべきです。

<p>
    HTML に関する詳細情報は、
    <a href="https://developer.mozilla.org/ja/docs/Web/HTML" target="_blank">
        Mozilla Developer Network (MDN)
    </a> を参照してください。
</p>

2.2 例 2：同じタブでお問い合わせフォームを開く（内部リンク）

ナビゲーションメニューなどの内部リンク（自サイト内の移動）では、通常は現在のページを切り替えるのが一般的です。これはデフォルトの挙動ですが、明示的に記述することも可能です。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">私たちについて</a></li>
    <li><a href="/contact" target="_self">お問い合わせ</a></li>
  </ul>
</nav>

2.3 例 3：セキュリティのベストプラクティス（_blank と rel="noopener"）

【重要】セキュリティ上の注意点：

target="_blank" を使用する場合、セキュリティ対策として rel="noopener" 属性を併記するのがベストプラクティスです。

rel="noopener" を付与しない場合、新しく開かれたページ側から JavaScript の window.opener プロパティを介して元のページを操作されるリスクがあります。これにより、悪意のあるサイトが元のページをフィッシングサイトへリダイレクトさせるといった攻撃が可能になります。rel="noopener" は、2つのページ間の接続を遮断することでこの攻撃を防ぎます。

<a href="https://www.example.com" target="_blank" rel="noopener">
    Example.com を訪問（セキュアな設定）
</a>

さらに古いブラウザまで考慮して、新しいページにどこから来たかの情報（Referer ヘッダー）を送信しないようにするには、noreferrer も追加します。

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
    Example.com を訪問（非常にセキュアな設定）
</a>

2.4 例 4：PDF ドキュメントへのリンク

PDF ファイルへリンクする場合、一般的に新しいタブで開くことが推奨されます。これにより、PDF が現在のページを「乗っ取って」しまうのを防ぎ、ユーザーの混乱を避けることができます。

<p>
    パンフレットをダウンロード：
    <a href="brochure.pdf" target="_blank" rel="noopener">PDF を表示</a>
</p>

3. まとめ

target 属性は、Web サイトのナビゲーション挙動を「意図通り」にコントロールするための強力なツールです。

  • 外部サイトや PDF へのリンクには target="_blank" を使用する。
  • target="_blank" を使う際は、必ず rel="noopener" をセットで記述し、セキュリティを確保する。
  • 内部リンク（自サイト内の移動）は、原則としてデフォルト（_self）のままにする。

これらのルールを守ることで、安全で使い心地の良い Web サイトを構築することができます。