MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

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

属性

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

download HTML5
この属性は、URL に移動するのではなくダウンロードするようブラウザーへ示しますので、ユーザーはローカルファイルとして保存することを促されます。属性に値を指定した場合、保存プロンプトのデフォルトのファイル名として解釈します (ユーザーは必要に応じてファイル名を変更できます)。使用可能な値に制限はありませんが、/ および \ はアンダースコアに変換します。多くのファイルシステムにはファイル名に使用できる文字の制限があり、ブラウザーがファイル名を調整するかもしれません。
注記:
  • この属性は 同一オリジンの 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: などがほとんどのブラウザーで動作します。
この属性は、プレースホルダーリンクを生成するために省略できます (HTML5)。プレースホルダーリンクは従来のハイパーリンクに似ていますが、どこにも移動しません。

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

hreflang
この属性は、リンク先のリソースの人間言語を示します。これは単なる助言であり、組み込まれている機能はありません。許容される値は、BCP47 で定められています。
referrerpolicy
URL を読み込む際にどの リファラー を送信するかを示します:
  • 'no-referrer' は、Referer: ヘッダーを送信しないことを表します。
  • 'no-referrer-when-downgrade' は、HTTPS を使用せずにオリジンへ移動する場合は Referer: ヘッダーを送信しないことを表します。これはデフォルトの動作です。
  • 'origin' は、ページの オリジン (ドメイン以降の情報を含まない) をリファラーとすることを表します。
  • '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="noopener noreferrer" の追加を検討してください。

type
リンク先 URL の MIME タイプ の形式を表すメディアタイプを指定します。これは厳密なアドバイザリー情報として提供されます。組み込まれている機能はありません。

廃止

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

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

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

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

rev HTML 4 のみ、廃止 HTML5
この属性は、逆方向のリンクを指定し、rel 属性と逆の関係を定義していました。これはとても混乱するため、非推奨になりました。
shape HTML 4 のみ、廃止 HTML5
この属性は、イメージマップを作成するために、ハイパーリンクの領域を定義するために使用しました。属性の値は circle、default、polygon、rect が使用できます。coords 属性の書式は shape の値に依存します。circle の場合、値は x,y,r を取り、x と y は円の中心を表すピクセル座標、r は円の半径をピクセルで指定します。rect の場合、coords 属性は x,y,w,h の値を取り、x,y は四角形の左上の座標、w と h は幅と高さを定義します。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/en-US/" 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 2806 および RFC 2396 をご覧ください。

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

ユーザーが HTML Canvas を画像としてダウンロードできるようにしたい場合は、download 属性と file URL で示した canvas データを付加したリンクを作成します。

var link = document.createElement('a');
link.innerHTML = '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 属性のみが定義されています。

アクセシビリティに関する提案

疑似的なボタンを作成するため onclick イベントとともに、ページの再読み込みを防ぐように href を "#" または "javascript:void(0)" に設定してアンカータグを使用することがよくあります。この値はリンクをコピーやドラッグする、新しいタブやウィンドウでリンクを開く、ブックマークに追加する、あるいは JavaScript が読み込み中、エラー状態、無効状態であるときに予期しない動作を引き起こします。また、スクリーンリーダーなどの支援技術に対して誤った意味を伝えます。この場合は、代わりに <button> を使用することを推奨します。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。

クリックとフォーカス

<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 属性を追加。
WHATWG HTML Living Standard
<a> の定義		 現行の標準  
HTML5
<a> の定義		 勧告  
HTML 4.01 Specification
<a> の定義		 勧告  

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有) 1.0 (1.7 or earlier) [1] (有) (有) (有)
href="#top" (有) (有) 10.0 (10.0) (有) (有) (有)
download 14 (有) 20.0 (20.0) Edge 13 [4] 15 未サポート
ping (有) ? 未サポート [2] 未サポート (有) 未サポート
referrerpolicy 46.0 [3]  ? 50 (50) 未サポート 未サポート 未サポート
機能 Android Android Webview Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート (有) (有) (有) 1.0 (1.0) [1] (有) (有) (有) (有)
href="#top" (有) ? (有) 10.0 (10.0) (有) (有) (有) ?
download (有) ? (有) 20.0 (20.0) 未サポート ? 未サポート ?
ping ? ? ? 未サポート [2] ? ? ? ?
referrerpolicy 未サポート 46.0 [3] ? 50.0 (50.0) 未サポート 未サポート 未サポート 46.0 [3]

[1] Gecko 41 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38) より、href 属性がない <a> をインタラクティブコンテンツに区分しないようになりました。内部にある <label> をクリックすると、ラベル付けしたコンテンツがアクティブになります (バグ 1167816)。

[3] flag で制御しています。

[4] v14.14357 まで、data URI をダウンロードしようとすると Edge がクラッシュします。

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, kyontan, pmint, ethertank, Marsf, kano, Btm, Mgjbot
 最終更新者: yyss,