HTML の <a> 要素 (アンカー要素) は、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリンクを作成します。

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 対話型コンテンツ, 知覚可能コンテンツ
許可されている内容 透過的コンテンツで、フローコンテンツ (対話型コンテンツを除く) または記述コンテンツを含むもの
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素、フローコンテンツ を受け入れるすべての要素。ただし <a> 要素を除く (対称性の論理原則によれば、親要素としての <a> タグは対話型コンテンツを持つことができませんので、<a> のコンテンツが <a> を親として持つこともできません)。
許可されている ARIA ロール button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab, treeitem
DOM インターフェイス HTMLAnchorElement

属性

この要素はグローバル属性を持ちます。

download HTML5
この属性は、URL に移動するのではなくダウンロードするようブラウザーへ示しますので、ユーザーはローカルファイルとして保存することを促されます。属性に値を指定した場合、保存プロンプトの既定のファイル名として解釈します (ユーザーは必要に応じてファイル名を変更できます)。使用可能な値に制限はありませんが、 / および \ はアンダースコアに変換します。多くのファイルシステムにはファイル名に使用できる文字の制限があり、ブラウザーがファイル名を調整するかもしれません。
メモ:
  • この属性は同一オリジンの URL に限り動作します。
  • HTTP(s) の URL は同一オリジンにある必要がありますが、お絵かきウェブアプリを使用して描いた画像など、 JavaScript で生成したコンテンツのために、 blob: の URL および data: の URL も許可されています。
  • Content-Disposition: HTTP ヘッダーでこの属性の指定と異なるファイル名が与えられた場合は、この属性より HTTP ヘッダーが優先します。
  • Content-Disposition:inline を指定している場合、Firefox はファイル名と同様に Content-Disposition を優先しますが、Chrome は download 属性を優先します。
href
ハイパーリンクが指す先を URL または URL フラグメントで示します。
URL フラグメントは、ハッシュ記号 (#) で始まり、現在の文書内のリンク先位置 (HTML 要素の id) を指定します。URL はウェブ (HTTP) ベースの文書に制限されず、ブラウザーが対応するあらゆるプロトコルを使用することができます。例えば、 file:ftp:mailto: などがほとんどのブラウザーで動作します。

メモ: 現在のページの最上部へのリンクとして href="#top" または空のフラグメント href="#" を使用できます。この動作は HTML5 で明記されました

hreflang
この属性は、リンク先のリソースの人間の言語を示します。これは単なる助言であり、組み込まれている機能はありません。許容される値は、BCP47 で定められています。
ping
ハイパーリンクをたどるときに、本体の PINGPOST リクエストが、ブラウザーによって (バックグラウンドで) 送信される、スペースで区切られた URL のリストを含みます。通常、トラッキングに使用されます。
referrerpolicy 
URL を読み込む際にどのリファラーを送信するかを示します。
  • 'no-referrer' は、Referer: ヘッダーを送信しないことを表します。
  • 'no-referrer-when-downgrade' は、HTTPS を使用せずにオリジンへ移動する場合は Referer: ヘッダーを送信しないことを表します。これは既定の動作です。
  • 'origin' は、ページの オリジン (ドメイン以降の情報を含まない) をリファラーとすることを表します。
  • 'origin-when-cross-origin' は、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。
  • 'strict-origin-when-cross-origin'
  • 'unsafe-url' は、リファラーにオリジンとパスを含めることを表しますが、フラグメント、パスワード、ユーザー名は除きます。これはセキュアな URL からセキュアでない URL へデータが漏えいしますので、安全ではありません。
rel
対象オブジェクトとリンクオブジェクトとの関係を指定します。属性値は、空白で区切られたリンク種別の値のリストです。
target
リンク先の URL を表示する場所を指定します。これは、閲覧コンテキスト (タブ、ウィンドウ、<iframe>) の名前またはキーワードです。以下のキーワードは特別な意味を持ちます:
  • _self: 現在と同じ閲覧コンテキストに URL を読み込みます。これは既定の動作です。
  • _blank: 新しい閲覧コンテキストに URL を読み込みます。通常はタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。
  • _parent: 現在の閲覧コンテキストの親コンテキストに URL を読み込みます。親がない場合は、_self と同じ振る舞いをします。
  • _top: トップレベルの閲覧コンテキスト (現在のコンテキストの祖先で "最上位" の閲覧コンテキストであり、親を持たない) に URL を読み込みます。親閲覧コンテキストがない場合は、_self と同じ振る舞いをします。

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

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

type
リンク先 URL の MIME タイプの形式を表すメディアタイプを指定します。これは純粋に助言的なもので、組み込まれている機能は組み込まれている機能はありません。

廃止された属性

charsetHTML5 で廃止
この属性は、リンク先 URL の文字エンコーディングを定義していました。この値は、RFC 2045 で定義されている文字セットの、スペースまたはカンマで区切られたリストです。既定値は ISO-8859-1 です。

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

coordsHTML 4 のみ, HTML5 で廃止
この属性は後述する shape 属性とともに使用して、ページ上のリンクの座標を定義する数値のカンマ区切りのリストを記述します。
nameHTML 4 のみ, HTML5 で廃止
この属性は、ページ内のリンク先の場所を定義するアンカーで必要でした。HTML 4.01 では、値がまったく同じであれば id 属性と name 属性を <a> 要素内で同時に使用できます。

使用上のメモ: この属性は HTML5 で廃止されました。代わりにグローバル属性の id を使用してください。

revHTML 4 のみ, HTML5 で廃止
この属性は、逆方向のリンクを指定し、rel 属性と逆の関係を定義していました。これはとても混乱するため、非推奨になりました。
メモ: 現在、 W3C HTML 5.2 仕様書では、rev は廃止ではないとされていますが、 WHATWG living standard は依然として廃止とラベル付けされています。この不一致が解消されるまで、廃止であると仮定すべきです。
shapeHTML 4 のみ, HTML5 で廃止
この属性は、イメージマップを作成するために、ハイパーリンクの領域を定義するために使用しました。属性の値は circle, default, polygon, rect が使用できます。 coords 属性の書式は shape の値に依存します。 circle の場合、値は x,y,r を取り、 xy は円の中心を表すピクセル座標、 r は円の半径をピクセルで指定します。 rect の場合、 coords 属性は x,y,w,h の値を取り、 x,y は四角形の左上の座標、 wh は幅と高さを定義します。 shape 属性の polygon の場合は、 coords 属性に x1,y1,x2,y2,... の値が必要です。各 x,y の組は多角形の頂点の座標を定義します。連続する頂点が直線で結ばれ、最後の頂点と最初の頂点も直線で結ばれます。 default の値は、閉じられた領域全体が必要で、一般的に画像が用いられます。
メモ: <img> 要素では usemap 属性を使用してください。関連付けられた <map> で、shape 属性の代わりにホットスポットを定義します。

外部の場所へのリンク

<!-- 外部ファイルにリンクするアンカー -->
<a href="https://www.mozilla.com/">
外部リンク
</a>

結果

外部リンク

同じページの異なる章へのリンク

<!-- 同じページで id="attr-href" を持つ要素へリンク -->
<a href="#attr-href">
同一ページ内リンクの説明
</a>

結果

同一ページ内リンクの説明

クリック可能な画像を作成する

以下のサンプルでは、画像を使用して MDN のホームページにリンクしています。ホームページを新しい閲覧コンテキスト (新しいページまたはタブ) で開きます。

<a href="https://developer.mozilla.org/ja/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
       alt="MDN logo" />
</a>

結果

新しいメッセージを送信できるようにするため、ユーザーのメールプログラムを開くリンクを作成することが一般的です。これは mailto: リンクを使用します。シンプルなサンプルはこちらです:

<a href="mailto:nowhere@mozilla.org">nowhere にメールを送る</a>

結果

nowhere にメールを送る

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

ウェブ文書を表示している携帯電話や電話を接続しているノートパソコンで、電話番号へのリンクを提供すると利便性が高まります。

<a href="tel:+491570156">+49 157 0156</a>

tel URL スキームについて、詳しくは RFC 3966 をご覧ください。

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

ユーザーが HTMLの <canvas> 要素を画像としてダウンロードできるようにしたい場合は、 download 属性とファイルの URL としてキャンバスデータを示した canvas データを付加したリンクを作成します。

var link = document.createElement('a');
link.textContent = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

これは jsfiddle.net/codepo8/V6ufG/2/ で試すことができます。

メモ

HTML 3.2 では name, href, rel, rev, title 属性のみが定義されています。

セキュリティとプライバシーの考慮事項

このヘッダーには無害な用途が多数ありますが、ユーザーのセキュリティとプライバシーに望ましくない結果をもたらす可能性もあります。詳細情報と緩和策については Referer header: privacy and security concerns を参照してください。

アクセシビリティの考慮事項

onclick イベント

誤った使用例として、アンカータグと onclick イベントを使用して疑似的なボタンを作成し、ページの再読み込みを防ぐために href"#" または "javascript:void(0)" に設定している例がよく見られます。

これらの値はリンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript が読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、 (読み上げソフトなどの) 支援技術に対して誤った意味を伝えます。このような場合は、代わりに <button> を使用することを推奨します。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。

target="_blank" 宣言で新しいタブまたはウィンドウで開くリンクと、 href 値がファイルのリソースを指すリンクのどちらも、リンクが起動されたときに起こる振舞いについてのインジケーターを含めてください。

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

<a target="_blank" href="https://www.wikipedia.org/">Wikipedia (新しいウィンドウで開きます)</a>
<a target="_blank" href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>

この種のリンクの振る舞いを表すためにテキストの代わりにアイコンが使われている場合は、 alt の説明を確実に入れてください。

スキップリンクはスキップナビとも呼ばれ、 <body> 要素のできるだけ開始タグの近くに配置れる a 要素であり、ページのメインコンテンツの始めにリンクします。このリンクで、ウェブサイトのヘッダーや基本ナビゲーションのような、複数のページに渡って繰り返されるコンテンツを飛ばすことができます。

スキップリンクは、スイッチコントロール、音声コマンド、口元のスティック/ヘッドワンドなどの支援技術を利用して操作する人にとっては、反復リンクを移動する行為が特に大変な作業なので有益です。

近接性

たくさんの対話型コンテンツ — アンカーを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で操作中に誤った対話型コンテンツを有効化してしまうことがある人にとって有益です。

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

クリックとフォーカス

<a> をクリックしたときにフォーカスを得るかどうかは、ブラウザーおよび OS によって異なります。

<a> をクリックするとフォーカスを得るか
デスクトップ版ブラウザー Windows 8.1 OS X 10.9
Firefox 30.0 はい はい
Chrome ≥39
(Chromium bug 388666)
はい はい
Safari 7.0.5 N/A tabindex がある場合のみ
Internet Explorer 11 はい N/A
Presto (Opera 12) はい はい
<a> をタップするとフォーカスを得るか
モバイル版ブラウザー iOS 7.1.2 Android 4.4.4
Safari Mobile tabindex がある場合のみ N/A
Chrome 35 ??? tabindex がある場合のみ

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 あり
補足
完全対応 あり
補足
補足 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 完全対応 ありEdge Mobile 完全対応 あり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 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 あり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 未対応 なしEdge Mobile 未対応 なし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 完全対応 14Edge 完全対応 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 ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 20Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
hrefChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
hreflangChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
name
非推奨
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
ping
実験的
Chrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 あり
無効
完全対応 あり
無効
無効 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 ? Edge Mobile 未対応 なし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 未対応 なしFirefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 11.1WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile 未対応 なしFirefox Android 完全対応 50Opera Android 完全対応 38Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.2
relChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
rev
非推奨
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 あり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 未対応 なしEdge Mobile 未対応 なし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 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
typeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

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

関連情報