<a>: アンカー要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<a>
は HTML の要素(アンカー要素)で、href
属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。
<a>
の内容は、リンク先を示すものであるべきです。href
属性が存在する場合、<a>
要素にフォーカスがある状態で Enter キーを押すと起動します。
試してみましょう
属性
この要素にはグローバル属性があります。
attributionsrc
Experimental-
ブラウザーが
Attribution-Reporting-Eligible
ヘッダーを送信することを指定します。サーバー側では、これはレスポンスでAttribution-Reporting-Register-Source
ヘッダーの送信を開始し、ナビゲーションベースのアトリビューションソースを登録するために使用します。ブラウザーは、ユーザーがリンクをクリックすると、ナビゲーションベースのアトリビューションソース(
Attribution-Reporting-Register-Source
レスポンスヘッダーで指定された)に関連付けられたソースデータを格納されます。詳細はアトリビューション報告 API を参照してください。この属性には設定することができる 2 つのバージョンがあります:
-
論理値、つまり
attributionsrc
の名前だけです。これは、Attribution-Reporting-Eligible
ヘッダーを、href
属性がこの点を指すのと同じサーバーに送ることを指定します。同じサーバーでアトリビューションソースの登録を処理している場合は、これで問題ありません。 -
1 つ以上の URL を格納する値。例えば、以下のようなものです。
htmlattributionsrc="https://a.example/register-source https://b.example/register-source"
これは、リクエストされたリソースが制御するサーバーにない場合や、属性ソースを別のサーバーに登録する処理だけをしたい場合に有益です。この場合、
attributionsrc
の値として 1 つ以上の URL を指定します。リソースリクエストが発生すると、Attribution-Reporting-Eligible
ヘッダーはリソース元に加えてattributionsrc
を指定したURLにも送信されます。これらの URL はAttribution-Reporting-Register-Source
で応答し、登録を完了することができます。メモ: 複数のURLを指定するということは、同じ機能に複数の属性ソースを登録できるということを意味しています。例えば、成功を測定しようとしている異なるキャンペーンがあり、異なるデータで異なるレポートを生成する必要があるかもしれません。
<a>
要素はアトリビューショントリガーとして使用することはできず、ソースとしてのみです。 -
download
-
ブラウザーがリンクされた URL をダウンロードとして扱うようにします。
filename
値があってもなくても構いません。-
値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。
- HTTP の
Content-Disposition
ヘッダー - URL のパスの最後の部分
- メディア種別(
Content-Type
ヘッダー、data:
URL の先頭、blob:
URL のBlob.type
から)
- HTTP の
-
値を定義すると、ファイル名として提案します。
/
および\
はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。
メモ:
download
は同一オリジンの URL と、blob:
、data:
の各スキームでのみ動作します。- ブラウザーがダウンロードをどのように扱うかは、ブラウザー、ユーザーの設定、その他の要因によって異なります。ダウンロードを開始する前にユーザーにプロンプトが表示されたり、ファイルが自動的に保存されたり、外部のアプリケーションまたはブラウザー自体で自動的に開いたりすることがあります。
Content-Disposition
ヘッダーがdownload
とは異なる情報を持っていた場合、動作結果は様々です。- ヘッダーが
filename
を指定した場合、そちらがdownload
属性で指定されたファイル名より優先されます。 - ヘッダーが
inline
の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。Firefox の(82 以前の)古い版では、ヘッダーが優先され、コンテンツがインラインで表示されます。
- ヘッダーが
-
href
-
ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。
- 電話番号を示す
tel:
URL - メールアドレスを示す
mailto:
URL - SMS テキストメッセージを示す
sms:
URL javascript:
URL による実行可能なコード- ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは
registerProtocolHandler()
を使用することができます。
他にも、次のようにして URL 機能でリソースの特定の部分を記載することができます。
- ページの節を示すフラグメント URL
- テキストフラグメントで指定されたテキストの部分
- メディアファイルの一部を示すメディアフラグメント
- 電話番号を示す
hreflang
-
リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、
lang
グローバル属性と同じです。 ping
-
空白で区切られた URL のリストです。リンクをたどるとき、ブラウザーは
POST
リクエストを指定された URL に、PING
を本文として送信します。通常、トラッキングに使用されます。 referrerpolicy
-
リンクをたどるときにどれだけのリファラーを送信するかです。
no-referrer
:Referer
ヘッダーは送信されません。no-referrer-when-downgrade
:Referer
ヘッダーはオリジンに TLS (HTTPS) がない場合は送信されません。origin
: 送信されるリファラーは、参照元ページのオリジンのみに限定されます。すなわちスキーム、ホスト名、ポート番号です。origin-when-cross-origin
: 他のオリジンに送信されるリファラーは、スキーム、ホスト名、ポート番号に限定されます。同じオリジン内での移動の場合はパスが含まれます。same-origin
: リファラーは同じオリジンには送られますが、オリジン間リクエストではリファラー情報が含まれません。strict-origin
: プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) は、文書のオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信しません。strict-origin-when-cross-origin
(default): 同一オリジンへのリクエストを行う際には URL 全体が送信され、プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) はオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信されません。unsafe-url
: リファラーにはオリジンおよびパスが含まれます(ただしフラグメント、パスワード、ユーザー名は含まれません)。この値は安全ではありません。オリジンとパスを TLS で保護されたリソースから安全ではないオリジンに漏洩させるからです。
rel
-
リンク先の URL との関係を示す、空白で区切られたリンク種別のリストです。
target
-
リンク先の URL を表示する場所、閲覧コンテキスト(タブ、ウィンドウ、
<iframe>
)の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。_self
: 現在の閲覧コンテキストです。(既定値)_blank
: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。_parent
: 現在の親の閲覧コンテキストです。親がない場合は、_self
と同じ振る舞いをします。_top
: 最上位の閲覧コンテキスト(現在のコンテキストの祖先である "最上位" のコンテキスト)です。親の閲覧コンテキストがない場合は、_self
と同じ動作をします。_unfencedTop
: 埋め込まれたフェンスフレームが最上位のフレームを移動できるようにします (つまり、他の予約された移動先とは異なり、フェンスフレームのルートを越えて移動します)。これがフェンスフレームのコンテキスト外で使用されてもナビゲーションは成功しますが、予約語のようには動作しないことに注意してください。
メモ:
target="_blank"
を<a>
要素に設定すると、暗黙的にrel
の動作はrel="noopener"
が設定されたかのように動作し、window.opener
を設定しません。 type
-
リンク先 URL の MIME タイプの形式を表すヒントです。組み込まれている機能はありません。
非推奨の属性
charset
非推奨;-
リンク先 URL の文字エンコーディングのヒントでした。
メモ: この属性は廃止されており、ページ作者が使用すべきではありません。リンク先の URL で HTTP の
Content-Type
ヘッダーを使用してください。 coords
非推奨;-
shape
属性とともに使用されます。カンマ区切りの座標のリストです。 name
非推奨;-
ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば
id
属性とname
属性を<a>
要素内で同時に使用できました。メモ: 代わりにグローバル属性の
id
を使用してください。 rev
非推奨;-
この属性は、逆方向のリンクを指定します。
rel
属性と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。 shape
非推奨;-
イメージマップ内のハイパーリンクの領域の形状です。
メモ: イメージマップについては
<area>
要素を使用してください。
アクセシビリティ
強力なリンクテキスト
リンクの内容は、文脈から外れたとしても、リンクの行き先を示すべきです。
アクセシビリティに対応していない貧弱なリンクテキスト
よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。
<p>私たちの製品については<a href="/products">こちら</a>をご覧ください。</p>
結果
強力なリンクテキスト
幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。
<p><a href="/products">私たちの製品について</a>、詳しくご覧ください。</p>
結果
支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。
onclick イベント
よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、href
を #
または javascript:void(0)
に設定してページの再読み込みを防ぎ、click
を待ち受けするようにするというものがあります。
これらの偽の href
値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。
代わりに <button>
を使用してください。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。
外部リンクおよび HTML 以外のリソースへのリンク
リンクを新しいタブやウィンドウで開くために target="_blank"
を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。
弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。
新しいタブやウィンドウを開くリンク
<a target="_blank" href="https://www.wikipedia.org">
Wikipedia (新しいウィンドウで開きます)
</a>
結果
HTML 以外のリソースへのリンク
<a href="2017-annual-report.ppt">2017 年次レポート (PowerPoint)</a>
リンクの動作を示すためにアイコンを使用する場合は、alt テキストを確実に入れてください。
<a target="_blank" href="https://www.wikipedia.org">
Wikipedia
<img alt="(新しいタブで開く)" src="newtab.svg" />
</a>
<a href="2017-annual-report.ppt">
2017 年次レポート
<img alt="(PowerPoint ファイル)" src="ppt-icon.svg" />
</a>
結果
スキップリンク
スキップリンクは <body>
コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。
<body>
<a href="#content" class="skip-link">メインコンテンツへスキップ</a>
<header>…</header>
<!-- スキップリンクがたどり着く位置 -->
<main id="content"></main>
</body>
.skip-link {
position: absolute;
top: -3em;
background: #fff;
}
.skip-link:focus {
top: 0;
}
結果
スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。
スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。
大きさと近接性
大きさ
リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。少なくとも 44×44 CSS ピクセルの大きさであることが推奨されています。
散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。
- Understanding Success Criterion 2.5.5: Target Size
- Target Size and 2.5.5
- Quick test: Large touch targets
近接性
リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。
間隔は margin
などの CSS プロパティを使用して作成することができます。
例
絶対 URL へのリンク
HTML
<a href="https://www.mozilla.com">Mozilla</a>
結果
相対 URL へのリンク
HTML
<a href="//example.com">スキーム相対 URL</a>
<a href="/ja/docs/Web/HTML">オリジン相対 URL</a>
<a href="./p">ディレクトリー相対 URL</a>
結果
同じページの要素へのリンク
<!-- 以下のセクションにリンクする <a> 要素 -->
<p><a href="#Section_further_down">下記の見出しまでジャンプ</a></p>
<!-- リンク先の見出し -->
<h2 id="Section_further_down">さらに下のセクション</h2>
結果
メモ: href="#top"
または空のフラグメント (href="#"
) を使用すると、現在のページの先頭にリンクすることができると、 HTML 仕様書で定義されています。
メールアドレスへのリンク
電話番号へのリンク
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>
結果
tel:
リンクは端末の能力によって様々な動作をします。
- 携帯電話ではその番号に自動ダイヤルします。
- 多くのオペレーティングシステムには、Skype や FaceTime のように電話をかけるプログラムがあります。
- ウェブサイトは
registerProtocolHandler
によってweb.skype.com
などを用いて電話を掛けることができます。 - 他にも、連絡先の電話番号を保存したり、他の端末へ電話番号を送信したりする動作があります。
tel
URL スキームについての構文、追加機能、その他の詳細について、詳しくは RFC 3966 をご覧ください。
download 属性を使用して <canvas> を PNG として保存する
<canvas>
要素の内容を画像として保存するには、href
に JavaScript で生成したキャンバスのデータが入った data:
URL、download
属性にダウンロードする PNG ファイルのファイル名を指定したリンクを作成します。
保存リンクのついた描画アプリ
HTML
<p>
マウスボタンを押しっぱなしにして動かすと描画されます。
<a href="" download="my_painting.png">絵をダウンロード</a>
</p>
<canvas width="300" height="300"></canvas>
CSS
html {
font-family: sans-serif;
}
canvas {
background: #fff;
border: 1px dashed;
}
a {
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
}
JavaScript
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;
function draw(x, y) {
if (isDrawing) {
c.beginPath();
c.arc(x, y, 10, 0, Math.PI * 2);
c.closePath();
c.fill();
}
}
canvas.addEventListener("mousemove", (event) =>
draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));
document
.querySelector("a")
.addEventListener(
"click",
(event) => (event.target.href = canvas.toDataURL()),
);
結果
セキュリティとプライバシー
<a>
要素は、ユーザーのセキュリティやプライバシーに影響を及ぼす可能性があります。詳細情報については Referer
ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。
target="_blank"
を rel="noreferrer"
や rel="noopener"
なしで使用すると、ウェブサイトが window.opener
API 搾取攻撃を受けやすくなりますが、新しい版のブラウザーでは target="_blank"
を設定すると、rel="noopener"
と同じ保護が提供されます。詳しくはブラウザーの互換性を参照してください。
技術的概要
コンテンツカテゴリー | フローコンテンツ、 記述コンテンツ、 対話型コンテンツ、知覚可能コンテンツ。 |
---|---|
許可されている内容 |
透過的コンテンツ、ただし子孫に
対話型コンテンツ または
<a> 要素がないもの、および
tabindex 属性が指定された子孫がないもの。
|
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 |
フローコンテンツを受け入れるすべての要素、ただし他の <a> 要素でないもの。
|
暗黙の ARIA ロール |
link (href 属性がある場合)、
それ以外は
generic
|
許可されている ARIA ロール |
|
DOM インターフェイス | HTMLAnchorElement |
仕様書
Specification |
---|
HTML Standard # the-a-element |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
<link>
は<a>
と似ていますが、ユーザーには見えないメタデータへのハイパーリンクのためのものです。:link
は CSS の擬似クラスで、<a>
要素に有効なhref
属性がついている場合に一致します。:visited
は CSS の擬似クラスで、<a>
要素のhref
属性が、過去にユーザーが訪問したことのある URL である場合に一致します。:any-link
は CSS の擬似クラスで、<a>
要素にhref
属性がある場合に一致します。- テキストフラグメントは、URL に追加するユーザーエージェント指示で、コンテンツ作成者が ID を使用せずに、ページ上の固有のテキストにリンクすることを可能にするものです。