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
- ハイパーリンクをたどるときに、本体の
PING
のPOST
リクエストが、ブラウザーによって (バックグラウンドで) 送信される、スペースで区切られた 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 で廃止- この属性は、イメージマップを作成するために、ハイパーリンクの領域を定義するために使用しました。属性の値は
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
の値は、閉じられた領域全体が必要で、一般的に画像が用いられます。
例
外部の場所へのリンク
<!-- 外部ファイルにリンクするアンカー --> <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>
結果
件名、本文、他の定義済みコンテンツを含めるなど、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
属性のみが定義されています。
アクセシビリティに関する提案
誤った使用例として、アンカータグと onclick
イベントを使用して疑似的なボタンを作成し、ページの再読み込みを防ぐために href を "#"
または "javascript:void(0)"
に設定している例がよく見られます。これらの値はリンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript が読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、(スクリーンリーダーなどの)支援技術に対して誤った意味を伝えます。このような場合は、代わりに <button>
を使用することを推奨します。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。
クリックとフォーカス
<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 がある場合のみ |
仕様書
仕様書 | 策定状況 | コメント |
---|---|---|
Referrer Policy referrer attribute の定義 |
勧告候補 | referrer 属性を追加。 |
HTML Living Standard <a> の定義 |
現行の標準 | |
HTML5 <a> の定義 |
勧告 | |
HTML 4.01 Specification <a> の定義 |
勧告 |
ブラウザーの対応
機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
基本対応 | あり | あり | あり1 | あり | あり | あり |
charset | あり | あり | あり | あり | あり | あり |
coords | なし | なし | あり — 582 | なし | なし | なし |
download | 14 | 133 | 20 | なし | 15 | 10.1 |
href | あり | あり | あり | あり | あり | あり |
hreflang | あり | あり | あり | あり | あり | あり |
name | あり | あり | あり | あり | あり | あり |
ping | あり | なし | あり4 | なし | あり | なし |
referrerpolicy | 51 | なし | 50 | なし | なし | なし |
rel | あり | あり | あり | あり | あり | あり |
rev | あり | あり | あり | あり | あり | あり |
shape | なし | なし | あり — 582 | なし | なし | なし |
target | あり | あり | あり | あり | あり | あり |
type | あり | あり | あり | あり | あり | あり |
機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
基本対応 | あり | あり | あり | あり1 | あり | あり | あり |
charset | あり | あり | あり | あり | あり | あり | あり |
coords | なし | なし | なし | あり — 582 | なし | なし | なし |
download | ? | ? | あり | 20 | ? | なし | ? |
href | あり | あり | あり | あり | あり | あり | あり |
hreflang | あり | あり | あり | あり | あり | あり | あり |
name | あり | あり | あり | あり | あり | あり | あり |
ping | ? | ? | なし | あり4 | ? | なし | ? |
referrerpolicy | 51 | 51 | なし | 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.