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

コンテンツカテゴリー フローコンテンツ記述コンテンツ対話型コンテンツ、知覚可能コンテンツ
許可された内容 フローコンテンツ対話型コンテンツを除く)または記述コンテンツを含む透過的コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 記述コンテンツを受け入れるすべての要素、フローコンテンツ を受け入れるすべての要素。ただし <a> 要素を除く (対称性の論理原則によれば、親要素としての <a> タグは対話型コンテンツを持つことができませんので、<a> のコンテンツが <a> を親として持つこともできません)。
許可された ARIA ロール buttoncheckboxmenuitemmenuitemcheckboxmenuitemradiooptionradioswitchtabtreeitem
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 で定められています。
ping
ハイパーリンクをたどるときに、本体の PINGPOST リクエストが、ブラウザーによって (バックグラウンドで) 送信される、スペースで区切られた URL のリストを含みます。通常、トラッキングに使用されます。
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 属性と逆の関係を定義していました。これはとても混乱するため、非推奨になりました。
: 現在、W3C HTML 5.2 仕様では、rev はもはや廃止ではないとされ、WHATWG living standard は依然として廃止とラベル付けされています。この不一致が解消されるまで、廃止であると仮定すべきです。
shape HTML 4 のみ、廃止 HTML5
この属性は、イメージマップを作成するために、ハイパーリンクの領域を定義するために使用しました。属性の値は circledefaultpolygonrect が使用できます。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/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 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 では namehrefrelrevtitle 属性のみが定義されています。

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

誤った使用例として、アンカータグと 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 属性を追加。
HTML Living Standard
<a> の定義
現行の標準  
HTML5
<a> の定義
勧告  
HTML 4.01 Specification
<a> の定義
勧告  

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート 有り 有り 有り1 有り 有り 有り
charset 有り 有り 有り 有り 有り 有り
coords 無し 無し 有り — 582 無し 無し 無し
download1413320 無し1510.1
href 有り 有り 有り 有り 有り 有り
hreflang 有り 有り 有り 有り 有り 有り
name 有り 有り 有り 有り 有り 有り
ping 有り 無し 有り4 無し 有り 無し
referrerpolicy51 無し50 無し 無し 無し
rel 有り 有り 有り 有り 有り 有り
rev 有り 有り 有り 有り 有り 有り
shape 無し 無し 有り — 582 無し 無し 無し
target 有り 有り 有り 有り 有り 有り
type 有り 有り 有り 有り 有り 有り
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート 有り 有り 有り 有り1 有り 有り ?
charset 有り 有り 有り 有り 有り 有り ?
coords 無し 無し 無し 有り — 582 無し 無し ?
download ? ? 有り20 ? 無し ?
href 有り 有り 有り 有り 有り 有り ?
hreflang 有り 有り 有り 有り 有り 有り ?
name 有り 有り 有り 有り 有り 有り ?
ping ? ? 無し 有り4 ? 無し ?
referrerpolicy5151 無し50 無し 無し ?
rel 有り 有り 有り 有り 有り 有り ?
rev 有り 有り 有り 有り 有り 有り ?
shape 無し 無し 無し 有り — 582 無し 無し ?
target 有り 有り 有り 有り 有り 有り ?
type 有り 有り 有り 有り 有り 有り ?

1. 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).

2. You can no longer nest an <a> element inside a <map> element to create a hotspot region — coords and shape attribute support removed.

3. Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092).

4. This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報