<a>: アンカー要素

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

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

属性

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

download

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

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

Note:

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

Note: target="_blank" を <a> 要素に設定すると、暗黙的に rel の動作は rel="noopener" が設定されたかのように動作し、 window.opener を設定しません。対応状況についてはブラウザーの互換性を参照してください。

type

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

廃止された属性

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

Note: この属性は廃止されており、ページ作者が使用すべきではありません。リンク先の URL で HTTP の Content-Type ヘッダーを使用してください。
coords Deprecated: shape 属性とともに使用されます。カンマ区切りの座標のリストです。
name Deprecated: ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば id 属性と name 属性を <a> 要素内で同時に使用できました。

Note: 代わりにグローバル属性の id を使用してください。
rev Deprecated: この属性は、逆方向のリンクを指定します。 rel 属性と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。
shape Deprecated: イメージマップ内のハイパーリンクの領域の形状です。

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

プロパティ

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

例

絶対 URL へのリンク

HTML

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

結果

相対 URL へのリンク

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 }

結果

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

<!-- <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>

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

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

メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 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 をご覧ください。

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) が、新しい版のブラウザーでは target="_blank" を設定すると、 rel="noopener" と同じ保護が提供されます。詳しくはブラウザーの互換性を参照してください。

アクセシビリティ

強力なリンクテキスト

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

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

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

<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 ピクセルの大きさであることが推奨されています。

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

近接性

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

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

Hand tremors and the giant-button-problem

仕様書

Specification
HTML Standard # the-a-element

ブラウザーの互換性

BCD tables only load in the browser

<a>: アンカー要素

試してみましょう

属性

廃止された属性

プロパティ

例

絶対 URL へのリンク

HTML

結果

相対 URL へのリンク

HTML

結果

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

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

電話番号へのリンク

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

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

HTML

CSS

JavaScript

結果

セキュリティとプライバシー

アクセシビリティ

強力なリンクテキスト

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

強力なリンクテキスト

onclick イベント

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

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

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

スキップリンク

大きさと近接性

大きさ

近接性

仕様書

ブラウザーの互換性

関連情報