target属性(ターゲットアトリビュート)とは | 意味や読み方など丁寧でわかりやすい用語解説

target属性は、HTMLの特定の要素において、ユーザーのアクション（例えばリンクのクリックやフォームの送信）によって発生する新しいコンテンツや結果をどこに表示するかを指定するための属性である。主に<a>タグ（アンカー要素）と<form>タグ（フォーム要素）で利用され、ウェブページのナビゲーションやインタラクションの動作を制御する上で重要な役割を果たす。この属性を用いることで、現在のタブやウィンドウにコンテンツを表示するのか、それとも新しいタブやウィンドウを開いて表示するのかといった、ブラウザの挙動をウェブ開発者が意図的に指示できる。

詳細

target属性が最も一般的に利用されるのは<a>タグである。<a>タグにtarget属性を指定すると、そのリンクがクリックされた際に、リンク先のコンテンツをどの「ブラウジングコンテキスト」で開くかを指定できる。ブラウジングコンテキストとは、ウェブページが表示される環境のことで、具体的にはブラウザのタブ、ウィンドウ、あるいは<iframe>要素（インラインフレーム）などのことを指す。

<a>タグにおけるtarget属性には、主に以下の特別なキーワード値が用意されている。

1. _self: これはtarget属性を省略した場合のデフォルトの動作と同じで、リンク先のコンテンツを現在のブラウジングコンテキスト、つまりリンク元のページが表示されている同じタブやウィンドウに開く。ユーザーがリンクをクリックすると、現在のページが新しいページに置き換わる挙動となる。

2. _blank: リンク先のコンテンツを新しいブラウジングコンテキスト、すなわち新しいタブやウィンドウに開く。この値を使用すると、ユーザーはリンク元のページを保持したまま、新しいページを閲覧できるため、外部リンクを開く際などによく用いられる。しかし、この挙動はユーザーの意図しないタブの増加を引き起こす可能性があり、またセキュリティ上の注意点も存在する。特に、target="_blank"を使用する場合は、悪意のあるウェブサイトが元のページを制御することを防ぐために、rel="noopener noreferrer"という属性も同時に指定することが強く推奨される。rel="noopener"は、新しいタブで開かれたページから元のページへの参照を断ち切り、window.openerオブジェクトをnullにすることで、元のページが悪用されるのを防ぐ。rel="noreferrer"は、新しいページへのHTTPリクエストにリファラ情報を送信しないようにする。

3. _parent: リンク先のコンテンツを現在のブラウジングコンテキストの親フレームセットまたは親<iframe>に開く。この値は、ページがフレームセットや<iframe>内で表示されている場合にのみ意味を持つ。ページが最も上位のブラウジングコンテキスト（親がない状態）で表示されている場合は、_selfと同じ動作をする。

4. _top: リンク先のコンテンツを最も上位のブラウジングコンテキストに開く。これも_parentと同様に、ページがフレームセットや<iframe>内で表示されている場合に意味を持つ。複数のフレームが入れ子になっている場合でも、すべてのフレームを解除してブラウザのウィンドウ全体に新しいコンテンツを表示する。ページが最も上位のブラウジングコンテキストで表示されている場合は、_selfと同じ動作をする。

これらのキーワード値の他に、target属性には特定のフレームの名前を指定することも可能である。例えば、<iframe name="myFrame"></iframe>という名前のフレームが存在する場合、<a href="page.html" target="myFrame"></a>と指定することで、page.htmlをそのmyFrame内に表示できる。しかし、フレームセットや<iframe>の使用は、ウェブページの構造化やアクセシビリティの観点から推奨されない場合が多く、現代のウェブ開発ではこの用途でのtarget属性の利用は減少傾向にある。

次に、target属性が利用される主なケースとして<form>タグがある。<form>タグにtarget属性を指定すると、フォームが送信された結果（例えば、サーバーからの応答ページ）をどのブラウジングコンテキストに表示するかを指定できる。<a>タグの場合と同様に、_self, _blank, _parent, _topなどのキーワード値が利用可能である。例えば、target="_blank"と指定すれば、フォームの送信結果が新しいタブやウィンドウに表示される。これは、ユーザーがフォーム送信後も元の入力フォームを残しておきたい場合や、別ウィンドウで結果を確認させたい場合などに有効である。

target属性の適切な利用は、ユーザーエクスペリエンスに大きく影響する。特に_blankを使用する際は、ユーザーが意図しないタブの増加に戸惑う可能性があるため、ユーザーに「新しいタブで開く」ことを明示的に伝える工夫（例えば、リンクのテキストに「（新しいタブで開く）」と追記するなど）も考慮すべきである。また、前述したセキュリティ上の観点から、rel="noopener noreferrer"の記述を忘れないことは、現代のウェブ開発における基本的なベストプラクティスとなっている。これらの点を踏まえ、target属性はウェブサイトの機能性、ユーザーの利便性、そしてセキュリティを向上させるために慎重に利用されるべき属性である。