<a>: アンカー要素

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

属性

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

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' は、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。
• '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 で廃止

この属性は、イメージマップを作成するために、ハイパーリンクの領域を定義するために使用しました。属性の値は 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 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 イベント

誤った使用例として、アンカータグと onclick イベントを使用して疑似的なボタンを作成し、ページの再読み込みを防ぐために href を "#" または "javascript:void(0)" に設定している例がよく見られます。

これらの値はリンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript が読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、 (読み上げソフトなどの) 支援技術に対して誤った意味を伝えます。このような場合は、代わりに <button> を使用することを推奨します。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。

外部リンク及び HTML 以外のリソースへのリンク

target="_blank" 宣言で新しいタブまたはウィンドウで開くリンクと、 href 値がファイルのリソースを指すリンクのどちらも、リンクが起動されたときに起こる振舞いについてのインジケーターを含めるてください。

弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この振舞いをアナウンスしません。

新しいタブまたはウィンドウに開くリンク

<a target="_blank" href="https://www.wikipedia.org/">Wikipedia (新しいウィンドウで開きます)</a>

HTML 以外のリソースへのリンク

<a target="_blank" href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>

この種のリンクの振る舞いを表すためにテキストの代わりにアイコンが使われている場合は、 alt の説明を確実に入れてください。

• WebAIM: Links and Hypertext - Hypertext Links
• MDN "WCAG を理解する ― ガイドライン 3.2 の解説"
• G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0
• G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0

スキップリンク

スキップリンクはスキップナビとも呼ばれ、 <body> 要素のできるだけ開始タグの近くに配置れる a 要素であり、ページのメインコンテンツの始めにリンクします。このリンクで、ウェブサイトのヘッダーや基本ナビゲーションのような、複数のページに渡って繰り返されるコンテンツを飛ばすことができます。

スキップリンクは、スイッチコントロール、音声コマンド、口元のスティック/ヘッドワンドなどの支援技術を利用して操作する人にとっては、反復リンクを移動する行為が特に大変な作業なので有益です。

• WebAIM: "Skip Navigation" Links
• How–to: Use Skip Navigation links - The A11Y Project
• MDN "WCAG を理解する ― ガイドライン 2.4 の解説"
• Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0

近接性

たくさんの対話型コンテンツ — アンカーを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で操作中に誤った対話型コンテンツを有効化してしまうことがある人にとって有益です。

間隔は margin などの CSS プロパティを使用して作成することができます。

• Hand tremors and the giant-button-problem - Axess Lab

クリックとフォーカス

<a> をクリックしたときにフォーカスを得るかどうかは、ブラウザーおよび OS によって異なります。

仕様書

ブラウザーの対応

関連情報

• 文字レベルの意味付けを行う他の要素: <abbr>, <em>, <strong>, <small>, <cite>, <q>, <dfn>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <b>, <i>, <mark>, <ruby>, <rp>, <rt>, <bdo>, <span>, <br>, <wbr>。