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

a要素 - ハイパーリンク

a要素はハイパーリンクを表す要素です。リンクを設置できます。ユーザーはリンクをクリックすると、そのページに移動できたり、そのファイルをダウンロードできたりします。

概要

名前
a (Anchor)
カテゴリ
Flow content
Phrasing content
Interactive content (href属性を持つ場合のみ。)
Palpable content
配置できる場所
Phrasing contentが期待される場所。
コンテンツモデル
Transparent content。ただしInteractive content、または、別のa要素の祖先になってはいけない。
タグの省略
開始タグも終了タグも省略できません。
コンテンツ属性
href - ハイパーリンクのURL。
target - リンクを開くコンテキスト。
download - リンク先のリソースをダウンロードする。
ping - リンクをクリックした時のpingの送信先。
rel - リンク先のリソースとの関係。
hreflang - リンク先のリソースの言語。
type - リンク先のリソースのMIME type。
referrerpolicy - リンク先にアクセスする時のリファラーポリシー。
DOM Interface
HTMLAnchorElement
デフォルトのスタイル

Chrome / Firefox / Safari

a:-webkit-any-link:active {
    color: -webkit-activelink;
}
a:-webkit-any-link {
    color: -webkit-link;
    cursor: auto;
    text-decoration: underline;
}
:focus {
    outline: -webkit-focus-ring-color auto 5px;
}
*|*:any-link:active {
    color: rgb(238, 0, 0);
}
*|*:any-link:not(svg|a) {
    text-decoration: underline;
}
*|*:link {
    color: rgb(0, 0, 238);
}
:any-link {
    cursor: pointer;
}
*|*:any-link {
    cursor: pointer;
}
a:any-link:active {
	color: -webkit-activelink;
}
a:any-link {
	color: -webkit-link;
	text-decoration: underline;
	cursor: auto;
}
:focus {
	outline-color: -webkit-focus-ring-color;
	outline-style: auto;
	outline-width: 5px;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-a-element

属性

href属性

ハイパーリンクのURL。この属性は必須ではない。この属性を持たない場合、要素はハイパーリンクを作成しない。

target属性

ハイパーリンクを開くコンテキスト。コンテキスト名を表す文字列、または下記のキーワードを指定する。

_blank
新しいコンテキストで開く。
_parent
1つ親のコンテキストで開く。親がない場合は_selfと同じ。
_self
同じコンテキストで開く。初期値。
_top
最上位の祖先のコンテキストで開く。親がない場合は_selfと同じ。

download属性

この属性を付けると、リンク先に移動するのではなくリンク先のリソースをダウンロードするようユーザーエージェントに促します。値を指定した場合はその値が、値を指定しない場合はリソース本来のファイル名が、ローカルに保存されるファイル名となります。基本的に、JavaScriptなどで作成したBlobや、インラインのData URI、同じオリジンの元にあるリソースに対して有効です。

ping属性

この属性を指定するとa要素をクリックした時に、値に指定したURLにpingが送信される。このリクエストはPOSTメソッドで、ping-from(リンク元)、ping-to(リンク先)のカスタムヘッダーを持つ。href属性を持っていないと、クリックしてもpingは送信されない。

rel属性

ドキュメントと、リンク先のリソースとの関係をキーワードで指定する。半角スペース( )で区切って複数指定可。仕様書はLink typesを参考。仕様書以外でも広く使われているキーワードはmicroformats.orgを参照。

alternate
リンク先のリソースが、現在のリソースの代替表現であることを示す。
author
リンク先のリソースが、現在のリソースの著者を説明するページ、または著者との連絡先であることを意味する。
bookmark
リンク先のリソースが、現在のリソースのパーマリンクであることを意味する。
external
リンク先のリソースが、外部のリソースであることを意味する。
help
リンク先のリソースが、現在のリソースの内容についての説明であることを意味する。
license
リンク先のリソースが、現在のリソースのライセンスの説明であることを意味する。
next
リンク先のリソースが、現在のリソースの次に参照すべきであることを意味する。
nofollow
リンク先のリソースが、現在のリソースとは無関係であることを意味する。一般的な検索エンジンはリンク先を辿らないためSEOの評価に貢献しない。資料提示のために有害サイトにリンクする場合などに用いる。
noopener
新しいコンテキストでリンクを開いた時に、開かれたコンテキストと現在のコンテキストとの関係を断ち切るようユーザーエージェントに指示する。開かれたコンテキストのwindow.openerの値がなくなる。フィッシングサイト対策に有効なので、新しいコンテキストで外部サイトを開くリンクには常にこの値を付与することが推奨される。特にユーザーが自由にURLを投稿できるコメントシステムなどで有用。(noopenerに関するさらに詳しい説明)
noreferrer
リンク先のリソースに、リファラーを送らないようにユーザーエージェントに指示する。
prev
リンク先のリソースが、現在のリソースの前に参照すべきであることを意味する。
search
リンク先のリソースが、現在のリソース、及び、その関連リソースを検索するためのページであることを意味する。
tag
リンク先のリソースが、現在のリソースが紐付けられているタグのページであることを意味する。

hreflang属性

リンク先のリソースの言語。BCP47で定められた形式の言語コード(IETF言語タグ)で指定すること。下記にいくつかの例を示す。

ja
日本語。
de
ドイツ語。
en-US
アメリカ英語。

type属性

リンク先のリソースのMIME type。この属性はただのヒントであり、ユーザーエージェントはこの属性を元にMIME typeを決定するわけではない。

referrerpolicy属性

リソースにアクセスする際のリファラーポリシーをキーワードで指定する。Referrer Policiesを参考。

no-referrer
いずれの場合もリファラーを送信しない。
no-referrer-when-downgrade
httpsからhttpに移動する時はリファラーを送信しない。ブラウザのデフォルトの挙動。
same-origin
同一オリジン間の移動時にだけ、リファラーを送信する。
origin
スキーム、ホスト、ポートのみをリファラーに含める。パスは含めない。
strict-origin
httpsからhttpに移動する時はリファラーを送信しない。それ以外では、originと同じ。
origin-when-cross-origin
同一オリジン間の移動時には、完全なリファラーを送信する。それ以外では、originと同じ。httpからhttpsへのアクセスはドメインが同じでもクロスオリジンとみなされる。
strict-origin-when-cross-origin
httpsからhttpに移動する時はリファラーを送信しない。同一オリジン間の移動時には、完全なリファラーを送信する。それ以外では、originと同じ。httpからhttpsへのアクセスはドメインが同じでもクロスオリジンとみなされる。
unsafe-url
いずれの場合も完全なリファラーを送信する。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

a要素の基本的な使い方を説明します。さらに詳しい使い方は、各属性の説明をご参考下さい。

ハイパーリンクの作成

href属性にURLを指定してリンクを作成するのが基本的な使い方です。URLの指定方法は絶対パスや相対パスなど様々です。詳しくはhref属性の説明をご参考下さい。

他ページへのリンク

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

ページ内へのリンク

目次などを作る場合に、シャープ(#)とid名でページ内リンクにできます。

<a href="#section-3">3章へ移動</a>

<h1 id="section-3">3章</h1>

開くウィンドウの調整

target属性_blankを指定すれば、新しいウィンドウでリンクを開きます。

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

新しいウィンドウで外部サイトを開く場合、rel属性noopenerを含めるべきです。

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

ダウンロード

download属性を付けると、クリックした時にダウンロードするリンクになります。

<a href="./image.png" download>画像をダウンロード</a>

デモ

<!-- このコードは編集できます。 -->

<p>a要素はハイパーリンクをマークアップする要素です。</p>
<p>
	<a href="https://syncer.jp/" target="_blank">SYNCERへのリンク</a>
</p>

<p>ダウンロードのリンクも作れます。</p>
<p>
	<a href="./mascot.png" download>
		<img src="./mascot.png" width="120" height="120">
	</a>
</p>

サポート状況

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

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
a要素
href属性
target属性
download属性 20+ 10+× 15+× 4.4+
ping属性 5.1+×× 15+ 4.0+
rel属性
hreflang属性
type属性
referrerpolicy属性 53+ 50+××× 40+××
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年2月9日 (木)
コンテンツを公開しました。