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
- デフォルトのスタイル
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>サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
| Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
|---|---|---|---|---|---|---|---|---|
| a要素 | ● | ● | ● | ● | ● | ● | ● | ● |
| href属性 | ● | ● | ● | ● | ● | ● | ● | ● |
| target属性 | ● | ● | ● | ● | ● | ● | ● | ● |
| download属性 | ● | ● 20+ | ● 10+ | ● | × | ● 15+ | × | × |
| ping属性 | ● | ● | ● 5.1+ | × | × | ● 15+ | ● | ● 4.0+ |
| rel属性 | ● | ● | ● | ● | ● | ● | ● | ● |
| hreflang属性 | ● | ● | ● | ● | ● | ● | ● | ● |
| type属性 | ● | ● | ● | ● | ● | ● | ● | ● |
| referrerpolicy属性 | ● 53+ | ● 50+ | × | × | × | ● 40+ | × | × |
関連記事
- HTMLのタグリファレンス
- HTMLの各タグ(要素)の使い方を、初心者向けにデモとサンプルコード付きでまとめています。
- referrerpolicy属性
- a要素のreferrerpolicy属性はリンク先にアクセスする時のリファラーポリシーを指定するための属性です。例えば、SSLから非SSLのページに移動する時だけはリファラーを送らない、などの調整ができます。
- グローバルオブジェクト
- JavaScriptの各グローバルオブジェクト(組み込みオブジェクト)の使い方を、初心者向けにデモとサンプルコード付きでまとめています。各ブラウザのサポート状況など。
- 電話番号にリンクを付けない
- スマホで電話番号に自動でリンクが付くのを防ぎます。
- 評価を与えずにリンクを貼る
- 被リンクの評価を与えずに、リンクを貼るにはrel属性にnofollowを指定します。
- 安全に外部サイトにリンクする
- 100%、信用のできない外部サイトにリンクをする時は、rel属性にnoopenerを指定しておきましょう。
- 別ウィンドウでリンクを開く
- リンクを新しいウィンドウで開きます。