<a>: アンカー要素

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

属性

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

downloadHTML5
リンクされた URL に移動するのではなく、保存するようユーザーに促します。値があってもなくても利用できます。
値を定義すると、ファイル名として提案します。 / および \ はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。
注:
  • この属性は同一オリジンの 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" を追加してください。

注: 新しいブラウザー (例えば Firefox 79 以降) では、 target="_blank"<a> 要素に設定すると、暗黙に rel の動作を rel="noopener" と設定したのと同様になります。

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

プロパティ

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 対話型コンテンツ, 知覚可能コンテンツ
許可されている内容 透過的コンテンツで、フローコンテンツ (対話型コンテンツを除く) または記述コンテンツを含むもの
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素、フローコンテンツ を受け入れるすべての要素。ただし <a> 要素を除く。
暗黙の ARIA ロール link (href 属性がある場合)。それ以外は 対応するロールなし
許可されている ARIA ロール

href 属性がある場合:

href 属性がない場合:

  • any
DOM インターフェイス HTMLAnchorElement

絶対 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> 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>

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

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

メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 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) が、新しい版のブラウザー (Firefox 79 以降など) では 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 を使用して移動するためだけに使用するべきです

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

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

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

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

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

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

大きさと近接性

大きさ

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

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

近接性

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

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

仕様書

仕様書 状態 備考
Referrer Policy
referrer attribute の定義
勧告候補 referrerpolicy 属性を追加。
HTML Living Standard
<a> の定義
現行の標準
HTML5
<a> の定義
勧告
HTML 4.01 Specification
<a> の定義
勧告

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
aChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
charset
非推奨
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
coords
非推奨
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 58
補足
未対応 ? — 58
補足
補足 You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 ? — 58
補足
未対応 ? — 58
補足
補足 You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
downloadChrome 完全対応 14
補足
完全対応 14
補足
補足 Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
Edge 完全対応 18
完全対応 18
部分対応 13
補足
補足 Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092).
補足 Edge 17 or older didn't follow the attributes' value to determine filename (bug 7260192).
Firefox 完全対応 20IE 未対応 なしOpera 完全対応 15Safari 完全対応 10.1WebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in WebView 65, cross-origin downloads are not supported on the <a> element.
Chrome Android 完全対応 18
補足
完全対応 18
補足
補足 Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
Firefox Android 完全対応 20Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 1.0
補足
完全対応 1.0
補足
補足 Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the <a> element.
hrefChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
hreflangChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
target="_blank" implies rel="noopener" behavior
非推奨
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 79IE 未対応 なしOpera 未対応 なしSafari 完全対応 12.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 79Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 未対応 なし
name
非推奨
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
ping
実験的
Chrome 完全対応 ありEdge 完全対応 79Firefox 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
referrerpolicyChrome 完全対応 51Edge 完全対応 79Firefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 11.1WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android 完全対応 50Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.2
relChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
rev
非推奨
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
shape
非推奨
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 58
補足
未対応 ? — 58
補足
補足 You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 ? — 58
補足
未対応 ? — 58
補足
補足 You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
targetChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
typeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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