<a>: アンカー要素

<a> は HTML の要素（アンカー要素）で、href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。

<a> の内容は、リンク先を示すものであるべきです。href 属性が存在する場合、<a> 要素にフォーカスがある状態で Enter キーを押すと起動します。

属性

この要素にはグローバル属性があります。

download

ブラウザーがリンクされた URL をダウンロードとして扱うようにします。filename 値があってもなくても構いません。

値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。
- HTTP の Content-Disposition ヘッダー
- URL のパスの最後の部分
- メディア種別（Content-Type ヘッダー、 data: URL の先頭、 blob: URL の Blob.type から）
値を定義すると、ファイル名として提案します。 / および \ はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。

メモ:

download は同一オリジンの URL と、 blob:、 data: の各スキームでのみ動作します。
ブラウザーがダウンロードをどのように扱うかは、ブラウザー、ユーザーの設定、その他の要因によって異なります。ダウンロードを開始する前にユーザーにプロンプトが表示されたり、ファイルが自動的に保存されたり、外部のアプリケーションまたはブラウザー自体で自動的に開いたりすることがあります。
Content-Disposition ヘッダーが download とは異なる情報を持っていた場合、動作結果は様々です。
- ヘッダーが filename を指定した場合、そちらが download 属性で指定されたファイル名より優先されます。
- ヘッダーが inline の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。Firefox の（82 以前の）古い版では、ヘッダーが優先され、コンテンツがインラインで表示されます。

href

ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。

ページの節を示すフラグメント URL
テキストフラグメントで指定されたテキストの部分
メディアファイルの一部を示すメディアフラグメント
電話番号を示す tel: URL
メールアドレスを示す mailto: URL
ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは registerProtocolHandler() を使用することができます。

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 と同じ動作をします。

メモ: 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> 要素を使用してください。

例

絶対 URL へのリンク

HTML

html

<a href="https://www.mozilla.com"> Mozilla </a>

結果

相対 URL へのリンク

HTML

html

<a href="//example.com">スキーム相対 URL</a>
<a href="/ja/docs/Web/HTML">オリジン相対 URL</a>
<a href="./p">ディレクトリー相対 URL</a>

a {
  display: block;
  margin-bottom: 0.5em;
}

結果

同じページの要素へのリンク

html

<!-- 以下のセクションにリンクする <a> 要素 -->
<p><a href="#Section_further_down">下記の見出しまでジャンプ</a></p>

<!-- リンク先の見出し -->
<h2 id="Section_further_down">さらに下のセクション</h2>

結果

メモ: href="#top" または空のフラグメント (href="#") を使用すると、現在のページの先頭にリンクすることができると、 HTML 仕様書で定義されています。

メールアドレスへのリンク

メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 mailto: スキームを使用してください。

html

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

結果

件名や本文を含めるなど、mailto URL スキームの詳細については、電子メールのリンクまたは RFC 6068 をご覧ください。

電話番号へのリンク

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

html

<p>
  マウスボタンを押しっぱなしにして動かすと描画されます。
  <a href="" download="my_painting.png">絵をダウンロード</a>
</p>

<canvas width="300" height="300"></canvas>

CSS

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";

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" と同じ保護が提供されます。詳しくはブラウザーの互換性を参照してください。

アクセシビリティ

強力なリンクテキスト

リンクの内容は、文脈から外れたとしても、リンクの行き先を示すべきです。

アクセシビリティに対応していない貧弱なリンクテキスト

よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。

html

<p>私たちの製品については<a href="/products">こちら</a>をご覧ください。</p>

結果

強力なリンクテキスト

幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。

html

<p><a href="/products">私たちの製品について</a>、詳しくご覧ください。</p>

結果

支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。

onclick イベント

よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、click を待ち受けするようにするというものがあります。

これらの偽の href 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。

代わりに <button> を使用してください。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。

外部リンクおよび HTML 以外のリソースへのリンク

リンクを新しいタブやウィンドウで開くために target="_blank" を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。

弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。

新しいタブやウィンドウを開くリンク

html

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (新しいウィンドウで開きます)
</a>

結果

HTML 以外のリソースへのリンク

html

<a href="2017-annual-report.ppt"> 2017 年次レポート (PowerPoint) </a>

リンクの動作を示すためにアイコンを使用する場合は、alt テキストを確実に入れてください。

html

<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 はスキップリンクがフォーカスを受けるまでは画面外へ隠します。

html

<body>
  <a href="#content" class="skip-link">メインコンテンツへスキップ</a>

  <header>…</header>

  <main id="content"></main>
  <!-- スキップリンクがたどり着く位置 -->
</body>

css

.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}

結果

スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。

スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。

大きさと近接性

大きさ

リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。少なくとも 44×44 CSS ピクセルの大きさであることが推奨されています。

散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。

近接性

リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。

間隔は margin などの CSS プロパティを使用して作成することができます。

Hand tremors and the giant-button-problem

技術的概要

コンテンツカテゴリー	フローコンテンツ、記述コンテンツ、対話型コンテンツ、知覚可能コンテンツ。
許可されている内容	透過的コンテンツ、ただし子孫に対話型コンテンツまたは a 要素をがないもの、および tabindex 属性が指定された子孫がないもの。
タグの省略	不可。開始と終了タグの両方が必要。
許可されている親要素	記述コンテンツを受け入れるすべての要素、またはフローコンテンツを受け入れるすべての要素、ただし他の `<a>` 要素でないもの。
暗黙の ARIA ロール	`link` （`href` 属性がある場合）、それ以外は対応するロールなし
許可されている ARIA ロール	`href` 属性がある場合 `button` `checkbox` `menuitem` (en-US) `menuitemcheckbox` (en-US) `menuitemradio` (en-US) `option` (en-US) `radio` `switch` `tab` `treeitem` (en-US) `href` 属性がない場合すべて
DOM インターフェイス	`HTMLAnchorElement`

仕様書

Specification
HTML Standard # the-a-element

ブラウザーの互換性

BCD tables only load in the browser