SYNCERのロゴ
アイキャッチ画像

target属性 - リンクを開くコンテキスト

a要素のtarget属性はハイパーリンクを開くコンテキストを指定する属性です。新しいウィンドウで開きたい場合などに利用します。

概要

要素
a要素
DOM Interface
HTMLAnchorElement.target
仕様書
https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-target

コンテキスト名を表す文字列、または下記のキーワードを指定する。

_blank
新しいコンテキストで開く。
_parent
1つ親のコンテキストで開く。親がない場合は_selfと同じ。
_self
同じコンテキストで開く。初期値。
_top
最上位の祖先のコンテキストで開く。親がない場合は_selfと同じ。
<a href="https://syncer.jp/" target="_blank">新しいウィンドウでリンクを開く</a>

説明

値は、コンテキストを表す文字列、または、キーワードを指定します。

コンテキスト名

コンテキスト名を指定すると、その名前のコンテキストにおいてリンクを開きます。指定した名前のコンテキストが存在しない場合、新しくコンテキストを作成します。

<a href="https://syncer.jp/" target="hoge">SYNCER</a>
<!-- このコードは編集できます。 -->

<p>上のリンクを開き、ウィンドウを閉じずに下のリンクを開いてみましょう。</p>

<p>
	<a href="https://www.google.co.jp/" target="hoge">Google</a>
<p>

<p>
	<a href="https://www.yahoo.co.jp/" target="hoge">Yahoo! Japan</a>
<p>

キーワード

各キーワードの詳しい説明です。

_blank

常に新しいコンテキストを作成してリンクを開きます。

<a href="https://syncer.jp/" target="_blank">SYNCER</a>

_parent

1つ上の親コンテキストでリンクを開きます。例えば、ウィンドウAにおいて、iframe要素でリンクを開いたとします。この時、iframe要素内のウィンドウBの親コンテキストはAです。

<a href="https://syncer.jp/" target="_parent">SYNCER</a>

現在のウィンドウをAとします。iframe要素内のウィンドウBで、リンクをクリックしてみて下さい。

<!-- ウィンドウA -->
<iframe src="../B.html"></iframe>

<!-- ウィンドウB -->
<a href="https://syncer.jp/" target="_parent">1つ上の親コンテキストでリンクを開く</a>

下記はiframe要素でB.htmlを表示しています。

_self

自身のコンテキストでリンクを開きます。

<a href="https://syncer.jp/" target="_self">SYNCER</a>

_top

_parentは1つ上の親コンテキストなのに対し、_topは最上位の祖先のコンテキストでリンクを開きます。ウィンドウAのiframe要素でウィンドウBを開き、そのウィンドウBのiframe要素でウィンドウCを開き、さらにそのウィンドウCのiframe要素でウィンドウDを開いた時、要はA→B→C→Dとiframe要素を入れ子で開いている時、Dの1つ上の親コンテキストはCで、最上位の祖先のコンテキストはAです。

<a href="https://syncer.jp/" target="_top">SYNCER</a>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月18日 (月)
コンテンツを公開しました。