HTML の <a> 要素 (アンカー要素) は、 href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。 <a> の内容は、リンク先を示すものであるべきです。
この要素にはグローバル属性があります。
/ および \ はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。download は同一オリジンの URL と、 blob:、 data: の各スキームでのみ動作します。Content-Disposition ヘッダーが download とは異なる情報を持っていた場合、動作結果は様々です。
ヘッダーが filename を指定した場合、そちらが download 属性で指定されたファイル名より優先されます。
ヘッダーが inline の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。 82 以前のバージョンの Firefox では、ヘッダーが優先され、コンテンツがインラインで表示されます。
ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。
tel: URLmailto: URLlang グローバル属性と同じです。PING を本文として送信します。通常、トラッキングに使用されます。<iframe>) の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。
_self: 現在の閲覧コンテキストです。 (既定値)_blank: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。_parent: 現在の親の閲覧コンテキストです。親がない場合は、 _self と同じ振る舞いをします。_top: 最上位の閲覧コンテキスト (現在のコンテキストの祖先である "最上位" のコンテキスト) です。親の閲覧コンテキストがない場合は、 _self と同じ動作をします。注: target を使用する際は、window.opener API の悪用を避けるために rel="noreferrer" を追加してください。
注: 新しいブラウザー (例えば Firefox 79 以降) では、 target="_blank" を <a> 要素に設定すると、暗黙に rel の動作を rel="noopener" と設定したのと同様になります。
注: この属性は廃止されており、ページ作者が使用すべきではありません。リンク先の URL で HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。
shape 属性とともに使用されます。カンマ区切りの座標のリストです。id 属性と name 属性を <a> 要素内で同時に使用できました。
注: 代わりにグローバル属性の {{HTMLAttrxRef("id")}} を使用してください。
rel 属性と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。| コンテンツカテゴリ | フローコンテンツ, 記述コンテンツ, 対話型コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 透過的コンテンツで、フローコンテンツ (対話型コンテンツを除く) または記述コンテンツを含むもの |
| タグの省略 | {{no_tag_omission}} |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素、フローコンテンツ を受け入れるすべての要素。ただし <a> 要素を除く。 |
| 暗黙の ARIA ロール | {{ARIARole("link")}} (href 属性がある場合）。それ以外は 対応するロールなし |
| 許可されている ARIA ロール |
|
| DOM インターフェイス | {{DOMxRef("HTMLAnchorElement")}} |
<a href="https://www.mozilla.com"> Mozilla </a>
{{EmbedLiveSample('Linking_to_an_absolute_URL')}}
<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 }
{{EmbedLiveSample('Linking_to_relative_URLs')}}
<!-- <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: リンクは端末の能力によって様々な動作をします。
web.skype.com などを用いて電話を掛けることができます。tel URL スキームについての構文、追加機能、その他の詳細について、詳しくは {{RFC(3966)}} をご覧ください。
{{HTMLElement("canvas")}} 要素の内容を画像として保存する場合は、 download 属性をもつリンクを作成し、キャンバスのデータを data: URLで示します。
<p>マウスボタンを押しっぱなしにして動かすと描画されます。 <a href="" download="my_painting.png">絵をダウンロード</a> </p> <canvas width="300" height="300"></canvas>
html {
font-family: sans-serif;
}
canvas {
background: #fff;
border: 1px dashed;
}
a {
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
}
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()
);
{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}
<a> 要素は、ユーザーのセキュリティやプライバシーに影響を及ぼす可能性があります。詳細情報については Referer ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。
target="_blank" を rel="noreferrer" や rel="noopener" なしで使用すると、ウェブサイトが {{domxref("window.opener")}} API 搾取攻撃を受けやすくなります (vulnerability description) が、新しい版のブラウザー (Firefox 79 以降など) では target="_blank" を設定すると、 rel="noopener" と同じ保護が提供されます。
リンクの内容は、文脈から外れたとしても、リンクの行き先を示すべきです。
よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。
<p> 私たちの製品については<a href="/products">こちら</a>をご覧ください。 </p>
幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。
<p> <a href="/products">私たちの製品について</a>詳しくご覧ください。 </p>
支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。
よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、 href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、 click を待ち受けするようにするというものがあります。
これらの偽の href 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。
代わりに {{HTMLElement("button")}} を使用してください。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。
リンクを新しいタブやウィンドウで開くために target="_blank" を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。
弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。
<a target="_blank" href="https://www.wikipedia.org"> Wikipedia (新しいウィンドウで開きます) </a>
<a href="2017-annual-report.ppt"> 2017 年次レポート (PowerPoint) </a>
この種のリンクの動作を表すためにテキストの代わりにアイコンが使われている場合は、 {{HTMLAttrxRef("alt", "img", "alt のテキスト", "true") }}を確実に入れてください。
<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>
スキップリンクは {{HTMLElement("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 ピクセルが推奨されます。
散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。
リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。
間隔は {{CSSxRef("margin")}} などの CSS プロパティを使用して作成することができます。
| 仕様書 | 状態 | 備考 |
|---|---|---|
| {{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}} | {{Spec2("Referrer Policy")}} | referrerpolicy 属性を追加。 |
| {{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}} | {{Spec2("HTML WHATWG")}} | |
| {{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}} | {{Spec2("HTML5 W3C")}} | |
| {{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}} | {{Spec2("HTML4.01")}} |
{{Compat("html.elements.a")}}
<a> と似ていますが、ユーザーには見えないメタデータへのハイパーリンクのためのものです。<a> 要素に有効な valid href 属性がついている場合に一致します。