HTML アンカー要素 (<a>) は、同一ページ内の場所または Web 内の別のページへのハイパーリンクを定義します。アンカーポイント (ページコンテンツ内のハイパーリンクの行き先) を作成するためにも使用できます (廃止された方法) ので、リンクはページのトップ以外にも接続できます。
<a href="https://developer.mozilla.org">MDN</a>
| コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、パルパブルコンテンツ |
|---|---|
| 許可された内容 | フローコンテンツ (インタラクティブコンテンツを除く) かフレージングコンテンツを含むトランスパレントコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フレージングコンテンツを受け入れるすべての要素、フローコンテンツを受け入れるすべての要素 |
| DOM インターフェイス | HTMLAnchorElement |
属性
この要素はグローバル属性を持ちます。
downloadHTML5- この属性は、ユーザがリンクをクリックするとリソースをローカルファイルとして保存することを促されるように、リソースをダウンロードするために使用されるハイパーリンクであることをページ作者が意図して記述します。属性に値が指定された場合、ユーザがリンクをクリックしたときに開く保存プロンプトの、デフォルトのファイル名として解釈します (もちろん、ユーザは実際にファイルを保存する前にファイル名を変更できます)。使用可能な値に制限はありません (ただし
/および\はアンダースコアに変換して、特定のパスヒントを防ぎます) が、多くのファイルシステムには、ファイル名に使用できない文字があることを考慮する必要があります。ブラウザがファイル名を調整するかもしれません。補足:
- この属性は、ユーザが簡単に JavaScript を使用するプログラムで生成されたコンテンツ (例えばオンラインのお絵かき Web アプリを使用して描いた画像) をダウンロードするため、
blob:URL およびdata:URL とともに使用できます。 - この属性で指定したものと異なるファイル名を
Content-Disposition:HTTP ヘッダで与えている場合は、この属性より HTTP ヘッダが優先します。 - この属性を指定するとともに
Content-Disposition:でinlineを指定している場合、Firefox はファイル名と同様にContent-Dispositionを優先しますが、Chrome はdownload属性を優先します。 - この属性は、同一生成元のリソースへのリンクでのみ受け入れられます。
- この属性は、ユーザが簡単に JavaScript を使用するプログラムで生成されたコンテンツ (例えばオンラインのお絵かき Web アプリを使用して描いた画像) をダウンロードするため、
href- これはハイパーリンクのソースを定義する、アンカー要素で唯一必須の属性でしたが、HTML5 では必須ではなくなりました。この属性を省略すると、プレースホルダリンクを生成します。
href属性では、リンク対象を URL または URL フラグメントで示します。この URL フラグメントは、ハッシュ記号 (#) で始まり、現在のドキュメント内のリンク先位置 (ID) を指定します。URL は Web (HTTP) ベースのドキュメントに制限されません。URL はブラウザでサポートされた任意のプロトコルが使用できます。例えば、fileやftp、mailtoなど、多くのユーザエージェントで動作します。補足: 特別なフラグメントである "top" を使用すると、ページの最上部に戻るリンクを作成できます。例:
<a href="#top">ページ上部へ戻る</a>。この動作は HTML5 で明記されました。 hreflang- この属性は、リンク先のリソースの言語を示します。これは単なる助言です。許容される値は、HTML5 については BCP47、HTML4 については RFC1766 で定められています。この属性は、
href属性が提供されている場合にのみ使用します。 pingHTML5- 'ping' 属性がある場合は、ユーザがハイパーリンクをたどる際にリソースの URL に通知/ping を送信します。
referrerpolicy- リソースを読み込む際にどのリファラを使用するかを示す文字列です:
"no-referrer"は、Referer:ヘッダを送信しないことを表します。- "
no-referrer-when-downgrade" は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合はReferer:ヘッダを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザエージェントのデフォルトの動作です。 "origin"は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラとすることを表します。- "origin-when-cross-origin" は、異なる生成元へのナビゲートではリファラをスキーム、ホスト、ポートに制限します。同一生成元へのナビゲートでは、リファラのパスも含めます。
"unsafe-url"は、リファラに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザ名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
rel- href 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。属性値は、空白で区切られたリンクタイプ値のリストです。値とそれらの意味は、ドキュメントの作者に意味づけを示す何らかの権威により登録されます。値が与えられない場合のデフォルトの関係は、空 (void) です。この属性は、href 属性を与える場合にのみ使用してください。
target- この属性は、リンク先のリソースをどこに表示するかを指定します。これは、HTML4 ではフレームの名前またはキーワードでした。HTML5 では、ブラウズ・コンテキスト の名前またはキーワードです (例えば、タブ、ウィンドウ、インラインフレームなど)。以下のキーワードは特別な意味を持ちます:
_self: 応答を現在の同じ HTML4 フレーム (または HTML5 のブラウズ・コンテキスト) に読み込みます。この値は、属性が指定されていない場合のデフォルト値です。_blank: 応答を新しい名前の付けられていない HTML4 ウィンドウまたは HTML5 のブラウズ・コンテキストに読み込みます。_parent: 応答を現在のフレームの HTML4 フレームセットの親要素または HTML5 の現在の親ブラウズ・コンテキストに読み込みます。親要素がない場合、このオプションは_selfと同じ振る舞いをします。_top: HTML4 では、応答をすべて元のウィンドウに読み込み、他のフレームをすべてキャンセルします。HTML5 では、応答をトップレベルのブラウズ・コンテキストに読み込みます (現在のブラウズ・コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、このオプションは_selfと同じ振る舞いをします。
type- この属性は、リンク対象の MIME type の形式を表すメディアタイプを指定します。一般的に、これは厳密なアドバイザリ情報として提供されます。しかし将来、ブラウザがマルチメディアタイプの小さなアイコンを追加するかもしれません。例えば、メディアタイプが audio/wav にセットされた場合にブラウザが小さなスピーカーのアイコンを追加するでしょう。理解される MIME type の一覧は、https://www.w3.org/TR/html4/references.html#ref-MIMETYPES を参照してください。この属性は、
href属性を与える場合にのみ使用してください。
廃止
charset廃止 HTML5- この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は、RFC 2045 で定義されている文字セットの、スペースまたはカンマで区切られたリストです。デフォルト値は ISO-8859-1 です。
使用補足: この属性は HTML5 で廃止されており、ページ作者が使用すべきではありません。この属性と同じ効果を得るには、リンク先のリソースで HTTP Content-Type ヘッダを使用してください。
coordsHTML 4 のみ、廃止 HTML5- オブジェクトシェイプで使用します。この属性は、ページ上のオブジェクトの座標を定義する数値のカンマ区切りのリストを記述します。
nameHTML 4 のみ、廃止 HTML5- この属性は、ページ内のリンク先の場所を定義するアンカーで必要です。name の値は、id コア属性の値に似ており、ドキュメント内でユニークな英数字の識別子を記述します。HTML 4.01 仕様下では、値がまったく同じであれば id 属性と name 属性の両方を <a> 要素内で使用することができます。
使用補足: この属性は HTML5 で廃止されました。代わりに グローバル属性の id を使用してください。
revHTML 4 のみ、廃止 HTML5- この属性は、逆方向のリンクを指定し、rel 属性と逆の関係を指定します。これは、ドキュメントの作者など、オブジェクトがどこから来たかを示すのに役立ちます。
shapeHTML 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の値は、閉じられた領域全体が必要で、一般的に画像が用いられます。
非標準
datafld- この属性は、バウンドデータを提供するデータソースオブジェクトからの列名を指定します。
使用補足: この属性は非標準であり、ページ作者が使用すべきではありません。この属性と同じ効果を得るには、ページを動的に取得する XMLHttpRequest などのスクリプトと機構を使用してください。
サポート Gecko Presto WebKit Trident 未実装 未実装 未実装 IE4, IE5, IE6, IE7 (IE8 で削除) 規範文書 Microsoft's Data Binding: dataFld Property (MSDN) datasrc- この属性は、この要素にバインドしたデータを提供するデータソースオブジェクトの ID を示します。
使用補足: この属性は非標準であり、ページ作者が使用すべきではありません。この属性と同じ効果を得るには、ページを動的に取得する XMLHttpRequest などのスクリプトと機構を使用してください。
サポート Gecko Presto WebKit Trident 未実装 未実装 未実装 IE4, IE5, IE6, IE7 (IE8 で削除) 規範文書 Microsoft's Data Binding: dataSrc Property (MSDN) methods- この属性の値は、オブジェクト上で動作する関数についての情報を提供します。この値は基本的に HTTP プロトコルが利用されたときに与えられますが、(title 属性と同じような理由で) リンク先の情報を前もって含めるときに役立ちます。例えば定義されたメソッドの機能によって、異なるリンクの描画をブラウザが選択します。検索可能なリンクで異なるアイコンを取得したり、外部リンクには現在のサイトから去ることを示す描画にしたりできます。この属性は、定義された Internet Explorer 4 ですら、あまり理解されておらずサポートもされていません。Methods Property (MSDN)
urn- おそらく、これは Microsoft がサポートする、Uniform Resource Name (URN) のリンクに関連する属性です。標準化の作業に基づきますが、URN の意味はまだ正しく定義されていません。そのため、この属性は意味を持ちません。urn Property (MSDN)
例
外部の場所にリンクする
<!-- 外部ファイルにリンクするアンカー --> <a href="https://www.mozilla.com/"> 外部リンク </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:[email protected]">Send email to nowhere</a>
リンク結果はこちらです: Send email to nowhere.
件名、本文、他の定義済みコンテンツを含める方法など、mailto URL スキームの詳細については Email links または RFC 6068 をご覧ください。
電話番号リンクを作成する
Web ドキュメントを表示している携帯電話や電話に接続しているラップトップで、クリック可能な電話へのリンクを提供すると利便性が高まります。
<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);
こちらで試すことができます: https://jsfiddle.net/codepo8/V6ufG/2/
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| Referrer Policy referrer attribute の定義 |
草案 | referrer 属性を追加。 |
| WHATWG HTML Living Standard <a> の定義 |
現行の標準 | |
| HTML5 <a> の定義 |
勧告 | |
| HTML 4.01 Specification <a> の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | 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 | 15 | 未サポート |
ping |
(有) | 未サポート [2] | 未サポート | (有) | 未サポート |
referrerpolicy |
46.0 [3] | 45 (45) [4] | 未サポート | 未サポート | 未サポート |
| 機能 | Android | Android Webview | 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] | 45.0 (45.0) [4] | 未サポート | 未サポート | 未サポート | 46.0 [3] |
[1] Gecko 41 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38) より、href 属性がない <a> をインタラクティブコンテンツに区分しないようになりました。内部にある <label> をクリックすると、ラベル付けしたコンテンツがアクティブになります (バグ 1167816)。
[2] デフォルトで無効
[3] flag で制御しています。
[4] 設定 network.http.enablePerElementReferrer で制御しており、既定値は false です。Firefox 42 から Firefox 44 では、referrer という名前の属性でした。
クリックとフォーカス
<a> をクリックしたときに (デフォルトで) フォーカスを得るかは、ブラウザおよび OS により異なります。
| デスクトップ版ブラウザ | 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) | はい | はい |
| モバイル版ブラウザ | iOS 7.1.2 | Android 4.4.4 |
|---|---|---|
| Safari Mobile | tabindex がある場合に限る |
N/A |
| Chrome 35 | ??? | tabindex がある場合に限る |
注記
次の値は 2 大メジャーブラウザで予約されているキーバインドです。アクセスキーの値として使用すべきではありません: a, c, e, f, g, h, v, 左矢印, 右矢印。
HTML 3.2 には、name および href, rel, rev, title のみが定義されています。
target 属性はフレームをサポートしない Netscape 1 世代のブラウザなどでは定義されていません。さらに、target は厳密な XHTML での使用は許可されており、frameset や transitional モードに限定されています。
JavaScript での推奨事項
アンカータグが onclick イベントと共に使用される場面がよくあります。ページの再描画を防ぐため、href 属性に "#" や "javascript:void(0)" がセットされることがあります。どちらの値も、そのリンクをコピーして新しいタブやウィンドウを開くときに、予期しないエラーを起こす可能性があります。ユーザビリティ上の理由から、このことに配慮し、ユーザがアンカータグを使用するときにデフォルトの動作を妨げないようにしてください。
関連情報
- テキストレベルのセマンティックスを伝える他の要素:
<abbr>,<em>,<strong>,<small>,<cite>,<q>,<dfn>,<time>,<code>,<var>,<samp>,<kbd>,<sub>,<sup>,<b>,<i>,<mark>,<ruby>,<rp>,<rt>,<bdo>,<span>,<br>,<wbr>。