<a>: アンカー要素

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

download

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

• 値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。
  • 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 Deprecated

リンク先 URL の文字エンコーディングのヒントでした。

メモ: この属性は廃止されており、ページ作者が使用すべきではありません。リンク先の URL で HTTP の Content-Type ヘッダーを使用してください。

coords Deprecated

shape 属性とともに使用されます。カンマ区切りの座標のリストです。

name Deprecated

ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば id 属性と name 属性を <a> 要素内で同時に使用できました。

メモ: 代わりにグローバル属性の id を使用してください。

rev Deprecated

この属性は、逆方向のリンクを指定します。 rel 属性と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。

shape Deprecated

イメージマップ内のハイパーリンクの領域の形状です。

メモ: イメージマップについては <area> 要素を使用してください。

HTML

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

結果

HTML

<a href="//example.com">Scheme-relative URL</a>
<a href="/ja/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>

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

結果

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

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

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

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>

tel: リンクは端末の能力によって様々な動作をします。

• 携帯電話ではその番号に自動ダイヤルします。
• 多くのオペレーティングシステムには、 Skype や FaceTime のように電話をかけるプログラムがあります。
• ウェブサイトは registerProtocolHandler によって web.skype.com などを用いて電話を掛けることができます。
• 他にも、連絡先の電話番号をしたり、他の端末へ電話番号を送信したりする動作があります。

tel URL スキームについての構文、追加機能、その他の詳細について、詳しくは RFC 3966 をご覧ください。

<canvas> 要素の内容を画像として保存する場合は、 download 属性をもつリンクを作成し、キャンバスのデータを data: URLで示します。

保存リンクのついた描画アプリ

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

var canvas = document.querySelector('canvas'),
    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 搾取攻撃を受けやすくなります (vulnerability description) が、新しい版のブラウザーでは target="_blank" を設定すると、 rel="noopener" と同じ保護が提供されます。詳しくはブラウザーの互換性を参照してください。

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

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

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

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

強力なリンクテキスト

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

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

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

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

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

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

リンクを新しいタブやウィンドウで開くために 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>

• WebAIM: Links and Hypertext - Hypertext Links
• MDN / WCAG を理解する、ガイドライン 3.2
• G200: Opening new windows and tabs from a link only when necessary
• G201: Giving users advanced warning when opening a new window

スキップリンクは <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;
}

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

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

• WebAIM: "Skip Navigation" Links
• How-to: Use Skip Navigation links
• MDN / WCAG を理解する ― ガイドライン 2.4 の解説
• Understanding Success Criterion 2.4.1

大きさ

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

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

• Understanding Success Criterion 2.5.5: Target Size
• Target Size and 2.5.5
• Quick test: Large touch targets

近接性

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

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

• Hand tremors and the giant-button-problem

• <link> は <a> と似ていますが、ユーザーには見えないメタデータへのハイパーリンクのためのものです。
• :link は CSS の擬似クラスで、 <a> 要素に有効な href 属性がついている場合に一致します。