アンカー（ハイパーリンク）要素（a）の仕様と使い方
カテゴリ：HTML編
a要素
a要素はアンカー（anchor）を意味し、ページやサイト間のリンクを提供する要素です。
href属性
a要素は殆どの場合、href属性と組み合わせてハイパーリンクを作成するために使用されます。
フォーマットは以下となります。
<a href="リンク先のURL">リンクさせる文字（アンカーテキスト）</a>リンク先のURLには//からのURLを指定します。（//から指定する事で、http://とhttps://のどちらにも対応できます）
<a href="//example.com">〇〇へのリンク</a>相対パスと絶対パス
サイト内のページ同士のリンクでは、相対パス（現在のパスからの指定）や絶対パス（ドキュメントルート）でも指定できます。
以下は現在のパスが/article/1/の場合に/article/category/へのリンクを、相対パスと絶対パスで指定したものです。
相対パス：
<a href="../category/">カテゴリー一覧</a>
※../は1つ上のディレクトリを表します。つまりまず上のarticleに行き、categoryに行けという指示です。
絶対パス：
<a href="/article/category/">カテゴリー一覧</a>target属性
target属性にはリンク先のページをどこに表示するかを指定します。
初期設定（指定しない場合）は現在のページをリンク先のページに遷移させます。
指定できる値は以下の4つです。
| _blank | 新規ウインドウに表示します。 |
|---|---|
| _self | 現在のウインドウに表示します。 |
| _top | ウインドウがフレームに分割されている場合に分割を全て解除して表示します。 |
| _parent | ウインドウがフレームに分割されている場合に1段だけ分割を解除して親フレームに表示します。 |
<a href="/article/category/" target="_blank">カテゴリー一覧</a>download属性
download属性は、ダウンロードするファイルであることを表します。
リンクをクリックするとページの遷移ではなく、ファイルのダウンロードが行われます。
値にはダウンロードするファイル名を指定します。（省略可能）
<a href="/article/image/image.jpg" type="image/jpeg" download="画像.jpg">イメージ画像のダウンロード</a>rel属性
rel属性は、現在のページから見たリンク先ページとの関係性を表します。
一般的に、SEO上、分割ページであることや価値のないページである事を検索エンジンに伝える場合に使用します。
以下のような値を指定できます。
| next | 次のページ |
|---|---|
| prev | 前のページ |
| alternate | 代替ページ |
| author | 著者ページ |
| nofollow | 検索エンジンに辿らせないページ（Google検索エンジンにリンク先を辿らせない目的に使用） |
<span><a href="page01/" rel="prev">前のページ</a></span>
<span><a href="page03/" rel="next">次のページ</a></span>また、以下のnoreferrerやnoopenerも指定できます。
| noreferrer | ユーザーがハイパーリンクをたどった場合に、ブラウザがリンク先への遷移時にHTTPのRefererヘッダを送信しないようにします ※Refererヘッダについては後述します |
|---|---|
| noopener | ハイパーリンクをたどることで作成された別ウィンドウから元のコンテキストにアクセスできないようにします（window.openerプロパティの値をnullにします） |
a要素にtarget="_blank"が指定されたハイパーリンクの場合、リンク先のページは別ウインドウ（別タブ）で表示されますが、その際、window.openerプロパティを使用してリンク元のページが操作されてしまう可能性があります。
そのため、セキュリティ上の措置として、一般的に以下のようにtarget="_blank"属性と一緒に使用します。
<span><a href="page01/" rel="noreferrer noopener" target="_blank">リンク先のページ</a></span>rev属性
rev属性はrel属性とは逆にリンク先ページから見た現在のページとの関係性を表します。
指定できる値はrelと同様です。
<span><a href="page01/" rel="prev" rev="next">前のページ</a></span>
<span><a href="page03/" rel="next" rev="prev">次のページ</a></span>※リンク先の「前のページ」は現在のページから見れば前（prev）だが、前のページから見れば現在のページは次（next）となる。
hreflang属性
リンク先ページの言語を指定します。
日本語の場合はjaを指定します。
<a href="/ja/article/01/" hreflang="ja">日本語のページ</a>Googleの検索エンジンはhtml要素のlang属性は無視しますが、hreflang属性は言語の判別に使用します。
type属性
type属性は、リンク先ページのMIMEタイプを指定します。
例えば、コンテンツをHTMLバージョンとPDFバージョンの2つの形式で公開している場合、以下のように各形式へのリンクを指定します。
リンク先がHTML形式の場合：
<a href="/article/html/01/" type="text/html">HTMLバージョン</a>
リンク先がPDF形式の場合：
<a href="/article/pdf/01/01.pdf/" type="application/pdf">PDFバージョン</a>referrerpolicy属性
referrerpolicy属性は、リンク先ページのリファラーポリシーを指定します。
リファラーはHTTPプロトコルにおけるRefererヘッダに指定されるリンク元ページの情報です。
つまりリンク先のページに遷移した際に、リンク先のページのどのページからリンクされたか（つまりリンク元のページの情報）を伝えます。
主にWebページの統計情報用に使用されます。
例えば、Googleの検索結果から本サイト（web-svr.com）を開いた場合、以下のようなHTTPヘッダが送られます。
Refererヘッダからhttps://www.google.co.jp/から来た事が分かります。
GET / HTTP/1.1
Host: web-svr.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Referer: https://www.google.co.jp/
Accept-Encoding: gzip, deflate
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cookie: _ga=GA1.2.1352504837.1514859827; _gid=GA1.2.1873617248.1514859827; _gat_gtag_UA_9932942_28=1
指定できる値は以下となります。（下記以外の値を指定することはできません）
| no-referrer | リファラーを送信しません |
|---|---|
| no-referrer-when-downgrade | httpsからhttpにダウングレードする際にリファラーを送信しません referrerpolicy属性を指定しない場合、これが初期設定値です |
| same-origin | 同一オリジン間の移動の場合にのみリファラー送信します |
| origin | オリジン情報（プロトコル＋FQDN＋ポート番号）のみを送信します |
| strict-origin | オリジン情報（プロトコル＋FQDN＋ポート番号）のみを送信します（但し、ダウングレード時には送信しない） |
| origin-when-cross-origin | オリジンをまたぐ場合、オリジン情報のみを送信します |
| strict-origin-when-cross-origin | オリジンをまたぐ場合、オリジン情報のみを送信します（但し、ダウングレード時には送信しない） |
| unsafe-url | 常にリファラーを送信します |
以下のようにno-referrerを指定すれば、リンク先のページにどこからリンクされたかを隠ぺいすることができます。
<a href="http://example.com" referrerpolicy="no-referrer">リンク元を隠ぺいしてリンク</a>※リファラー送信の抑制はrel="noreferrer"でも可能です。
W3Cによるa要素の説明
a要素がhref属性を持つ場合、a要素は内容でラベル付けされたハイパーリンク（ハイパーテキストアンカー）を表します。
a要素がhref属性を持たない場合、要素は関連性があっても要素の内容だけからなるリンクが置かれた場所のプレースホルダを表します。
href属性が存在しない場合は、target、download、rel、rev、hreflang、type、およびreferrerpolicy属性を省略する必要があります。
公開日時：2018年01月02日 17:03:10
最終更新日時：2022年03月12日 07:14:10
