<a>: アンカー要素

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

属性

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

downloadHTML5

リンクされた URL に移動するのではなく、保存するようユーザーに促します。値があってもなくても利用できます。

値を定義すると、ファイル名として提案します。 / および \ はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。

• 値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。
  • HTTP の Content-Disposition ヘッダー
  • URL のパスの最後の部分
  • メディア種別 (Content-Type ヘッダー、 data: URL の先頭、 blob: URL の Blob.type から)

メモ:

• この属性は同一オリジンの URL と、 blob:、 data: の各スキームでのみ動作します。
• Content-Disposition: が download とは異なるファイル名を指定した場合は、ヘッダーが優先されます。 (Content-Disposition: inline の場合は、 Firefox はヘッダーを優先しますが Chrome は download を優先します。)

href

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

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

hreflang

リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、 lang グローバル属性と同じです。

ping

空白で区切られた URL のリストです。リンクをたどるときに、ブラウザーは POST リクエストを指定された URL に、 PING を本文として送信します。通常、トラッキングに使用されます。

referrerpolicy

リンクをたどるときにどれだけのリファラーを送信するかです。有効な値とその効果については Referrer-Policy を参照してください。

rel

リンク先の URL との関係を示す、空白で区切られたリンク種別のリストです。

target

リンク先の URL を表示する場所、 閲覧コンテキスト (タブ、ウィンドウ、<iframe>) の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。

• _self: 現在の閲覧コンテキストです。 (既定値)
• _blank: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。
• _parent: 現在の親の閲覧コンテキストです。親がない場合は、 _self と同じ振る舞いをします。
• _top: 最上位の閲覧コンテキスト (現在のコンテキストの祖先である "最上位" のコンテキスト) です。親の閲覧コンテキストがない場合は、 _self と同じ動作をします。

注: target を使用する際は、window.opener API の悪用を避けるために rel="noreferrer" を追加してください。

注: target="_blank" を使用して他のページにリンクすると、新しいページが現在のページと同じプロセスで実行されます。新しいページで JavaScript が実行されると、現在のページの性能が影響を受けます。これを避けるには、 rel="noreferrer noopener" を使用してください。

type

リンク先 URL の MIME タイプの形式を表すヒントです。組み込まれている機能はありません。

廃止された属性

charsetHTML5 で廃止

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

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

coordsHTML5 で廃止

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

nameHTML5 で廃止

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

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

revHTML5 で廃止

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

shapeHTML5 で廃止

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

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

プロパティ

例

絶対 URL へのリンク

HTML

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

結果

相対 URL へのリンク

HTML

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

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

結果

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

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">
  Jump to the heading below
</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

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

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

<a href="mailto:nowhere@mozilla.org">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 をご覧ください。

download 属性を使用して <canvas> を PNG として保存する

<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)。

アクセシビリティ

強力なリンクテキスト

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

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

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

<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 Annual Report 
  <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">メインコンテンツへスキップ</a>

  <header>
    …
  </header>

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

.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> 要素に有効な valid href 属性がついている場合に一致します。