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="noopener noreferrer" の追加を検討してください。

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

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 イベント

誤った使用例として、アンカータグと 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> の定義
勧告  

ブラウザーの対応

機能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 なし なし5.0
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.

関連情報