この記事の要点

target 属性は <a> や <form> のリンク先 / 送信先をどこに開くかを指定する HTML 属性 主な値: _self（同じタブ、既定）/ _blank（新規タブ）/ _parent（親フレーム）/ _top（最上位ウィンドウ） target="_blank" を使う際は必ず rel="noopener noreferrer" を併記し、tabnabbing 攻撃を防ぐ 最新ブラウザは _blank に対し暗黙の noopener を適用するが、互換性のため明示推奨 frame / iframe の name 属性を target に書くと、指定フレーム内でリンクを開ける

target 属性とは

target 属性は HTML の <a> 要素や <form> 要素で、リンク先や送信先をどのブラウジングコンテキスト（タブ / ウィンドウ / フレーム）に開くかを指定する属性です。

基本構文

<a href="https://example.com" target="開き方">テキスト</a>

<form action="/submit" target="送信先">
  ...
</form>

主な値

値	意味
_self（既定）	現在のタブ／フレームで開く
_blank	新しいタブ／ウィンドウで開く
_parent	親フレームで開く（iframe 階層が無ければ _self と同じ）
_top	最上位のブラウザウィンドウで開く（全フレーム解除）
任意の名前	同名のブラウジングコンテキスト（フレーム / ウィンドウ）で開く

使用例

1. 新規タブで開く

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Example を新規タブで開く
</a>

2. 親フレームで開く

<a href="/parent.html" target="_parent">親フレームで開く</a>

3. 最上位ウィンドウで開く（フレーム破棄）

<a href="/index.html" target="_top">トップに戻る</a>

4. 指定 iframe 内で開く

<iframe name="contentFrame" src="default.html"></iframe>

<a href="page1.html" target="contentFrame">contentFrame に表示</a>
<a href="page2.html" target="contentFrame">contentFrame に表示</a>

rel="noopener noreferrer" を必ず付ける

target="_blank" でリンクを開くと、開かれた側のページから JavaScript で window.opener 経由で元ページを操作できてしまう「tabnabbing 攻撃」のリスクがありました。

rel 値	効果
noopener	新規タブから window.opener を null にし、元ページへの干渉を防ぐ
noreferrer	Referer ヘッダを送らず、window.opener も null（プライバシー優先）

最新のブラウザでは target="_blank" に対し暗黙的に noopener が適用されますが、古いブラウザやクローラ・SEO 工具の都合もあり、明示するのが推奨です。

<!-- 推奨パターン -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイト
</a>

アクセシビリティ上の注意

• 新規タブで開くリンクは事前に知らせる（テキストやアイコンで明示）と親切
• スクリーンリーダー向けに aria-label や視覚アイコン (↗ 等) を併用
• 業務システム等で必要なリンクのみ _blank にする。全リンクを _blank にすると操作性が落ちる

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Example（新しいタブで開きます）">
  Example
  <span aria-hidden="true">↗</span>
</a>

frame / iframe 廃止と target

HTML5 で <frame> / <frameset> は廃止されました。現在 target で意味があるのは主に _self / _blank / _top / _parent / iframe の name です。

JavaScript からの代替

// target="_blank" と同じ
window.open('https://example.com', '_blank', 'noopener,noreferrer');

// 引数なしで開くと従来は opener が漏れていた。
// 'noopener' を必ず指定する。

form 要素での target

<form> でも target 属性が使えます。たとえば「フォーム送信結果を別タブで表示」「PDF ダウンロードフォームを新規タブで開く」用途で便利です。

<form action="/report.pdf" method="post" target="_blank">
  <button type="submit">PDF をダウンロード</button>
</form>

SEO への影響

• rel="noreferrer" を付けると、リンク先のアクセス解析で参照元 URL が記録されなくなる。広告計測や被リンク分析に影響することがある
• rel="nofollow" はリンクジュース（PageRank）を渡さない指示。target とは独立に併用可
• rel="sponsored" / rel="ugc" も併用可能（広告 / ユーザー投稿リンクの明示）

よくある誤り

NG	OK	理由
target="_BLANK"	target="_blank"	大文字小文字は厳密には区別しないが、慣例として小文字
target="_blank" 単体	target="_blank" rel="noopener noreferrer"	古いブラウザで tabnabbing 攻撃を許す
target="new"	target="_blank"	new は1 つのウィンドウ名として再利用される
全リンク _blank	外部リンク等限定	戻る操作の混乱・タブの乱立を招く

関連

• a要素
• href属性
• hreflang属性
• aタグのhrefの記載方法
• link要素