a 要素

この記事内

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

コンテンツカテゴリー	フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、パルパブルコンテンツ
許可された内容	フローコンテンツ (インタラクティブコンテンツを除く) またはフレージングコンテンツを含むトランスパレントコンテンツ
タグの省略	不可。開始と終了タグの両方が必要。
許可された親要素	フレージングコンテンツを受け入れるすべての要素、フローコンテンツを受け入れるすべての要素。ただし <a> 要素を除く (対称性の論理原則によれば、親要素としての <a> タグはインタラクティブコンテンツを持つことができませんので、<a> のコンテンツが <a> を親として持つこともできません)。
許可された ARIA ロール	`button`、`checkbox`、`menuitem`、`menuitemcheckbox`、`menuitemradio`、`option`、`radio`、`switch`、`tab`、`treeitem`
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 で定められています。

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 属性と逆の関係を定義していました。これはとても混乱するため、非推奨になりました。
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 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);

こちらで試すことができます: jsfiddle.net/codepo8/V6ufG/2/

注記

HTML 3.2 には name、href、rel、rev、title 属性のみが定義されています。

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

疑似的なボタンを作成するため 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> の定義	勧告

機能	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本サポート	1.0	(有)	1.0 (1.7 or earlier) [1]	1.0 [4]	(All)	1.0
`href="#top"`	(有)	(有)	10.0 (10.0)	(有)	(有)	(有)
download	14	13 [3]	20.0 (20.0)	未サポート	15	10.1
`ping`	(有)	未サポート	未サポート [2]	未サポート	(有)	未サポート
`referrerpolicy`	46.0 [2][5]	未サポート	50 (50)	未サポート	未サポート	未サポート

機能	Android	Android Webview	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Android 版 Chrome
基本サポート	(All)	(All)	(有)	1.0 (1.0) [1]	(All)	(All)	1.0	1.0
`href="#top"`	(有)	?	(有)	10.0 (10.0)	(有)	(有)	(有)	?
download	(有)	?	(有)	20.0 (20.0)	未サポート	?	未サポート	?
`ping`	?	?	未サポート	未サポート	?	?	?	?
`referrerpolicy`	未サポート	46.0 [3]	未サポート	50.0 (50.0)	未サポート	未サポート	未サポート	46.0 [3]

[1] Gecko 41 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38) より、href 属性がない <a> をインタラクティブコンテンツに区分しないようになりました。内部にある <label> をクリックすると、ラベル付けしたコンテンツがアクティブになります (バグ 1167816)。

[2] flag で制御しています。

[3] v14.14357 まで、data URI をダウンロードしようとすると Edge がクラッシュします。

[4] 世界初のウェブサイトでみられるように、アンカータグは最初のインターネットブラウザーからサポートされています。

[5] バージョン 51 より、フラグで制御されていません。

ドキュメントのタグと貢献者

タグ:

このページの貢献者: yyss, kyontan, pmint, ethertank, Marsf, kano, Btm, Mgjbot

最終更新者: yyss, 2017/07/30 7:08:40

a 要素
abbr 要素
bdi 要素
bdo 要素
cite 要素
code 要素
data 要素
dfn 要素
em 要素
i 要素
kbd 要素
mark 要素
q 要素
rp 要素
rt 要素
ruby 要素
s 要素
samp 要素
small 要素
span 要素
strong 要素
sub 要素
sup 要素
time 要素
u 要素
var 要素
wbr 要素
HTML Elements
1. A
  1. <a>
  2. <abbr>
  3. ~~<acronym>~~
  4. <address>
  5. ~~<applet>~~
  6. <area>
  7. <article>
  8. <aside>
  9. <audio>
2. B
  1. <b>
  2. <base>
  3. ~~<basefont>~~
  4. <bdi>
  5. <bdo>
  6. ~~<bgsound>~~
  7. ~~<big>~~
  8. ~~<blink>~~
  9. <blockquote>
  10. <body>
  11. <br>
  12. <button>
3. C
  1. <canvas>
  2. <caption>
  3. ~~<center>~~
  4. <cite>
  5. <code>
  6. <col>
  7. <colgroup>
  8. <content>
4. D
  1. <data>
  2. <datalist>
  3. <dd>
  4. <del>
  5. <details>
  6. <dfn>
  7. <dialog>
  8. ~~<dir>~~
  9. <div>
  10. <dl>
  11. <dt>
5. E
  1. <em>
  2. <embed>
6. F
  1. <fieldset>
  2. <figcaption>
  3. <figure>
  4. ~~<font>~~
  5. <footer>
  6. <form>
  7. ~~<frame>~~
  8. ~~<frameset>~~
7. G H
  1. <h1>
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>
  7. <head>
  8. <header>
  9. ~~<hgroup>~~
  10. <hr>
  11. <html>
8. I
  1. <i>
  2. <iframe>
  3. <img>
  4. <input>
  5. <ins>
  6. ~~<isindex>~~
9. J K
  1. <kbd>
  2. <keygen>
10. L
  1. <label>
  2. <legend>
  3. <li>
  4. <link>
  5. ~~<listing>~~
11. M
  1. <main>
  2. <map>
  3. <mark>
  4. ~~<marquee>~~
  5. <menu>
  6. <menuitem>
  7. <meta>
  8. <meter>
12. N
  1. <nav>
  2. ~~<nobr>~~
  3. ~~<noframes>~~
  4. <noscript>
13. O
  1. <object>
  2. <ol>
  3. <optgroup>
  4. <option>
  5. <output>
14. P
  1. <p>
  2. <param>
  3. <picture>
  4. ~~<plaintext>~~
  5. <pre>
  6. <progress>
15. Q
  1. <q>
16. R
  1. <rp>
  2. <rt>
  3. <rtc>
  4. <ruby>
17. S
  1. <s>
  2. <samp>
  3. <script>
  4. <section>
  5. <select>
  6. <shadow>
  7. <slot>
  8. <small>
  9. <source>
  10. ~~<spacer>~~
  11. <span>
  12. ~~<strike>~~
  13. <strong>
  14. <style>
  15. <sub>
  16. <summary>
  17. <sup>
18. T
  1. <table>
  2. <tbody>
  3. <td>
  4. <template>
  5. <textarea>
  6. <tfoot>
  7. <th>
  8. <thead>
  9. <time>
  10. <title>
  11. <tr>
  12. <track>
  13. ~~<tt>~~
19. U
  1. <u>
  2. <ul>
20. V
  1. <var>
  2. <video>
21. W
  1. <wbr>
22. X Y Z
  1. <xmp>

Jul	AUG	Sep
	13
2016	2017	2018

a 要素

属性

廃止

例

外部の場所にリンクする

表示結果

同じページの別の章にリンクする

表示結果

クリック可能な画像を作成する

表示結果

電子メールリンクを作成する

表示結果

電話番号リンクを作成する

`<canvas>` を PNG として保存するために `download` 属性を使用する

注記

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

クリックとフォーカス

仕様

ブラウザー実装状況

関連情報

ドキュメントのタグと貢献者

MDN の見た目が変わったのはなぜ？

a 要素

属性

廃止

例

外部の場所にリンクする

表示結果

同じページの別の章にリンクする

表示結果

クリック可能な画像を作成する

表示結果

電子メールリンクを作成する

表示結果

電話番号リンクを作成する

<canvas> を PNG として保存するために download 属性を使用する

注記

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

クリックとフォーカス

仕様

ブラウザー実装状況

関連情報

ドキュメントのタグと貢献者

ありがとうございます！ 購読確認用の新着メールを探してください。

MDN の見た目が変わったのはなぜ？

`<canvas>` を PNG として保存するために `download` 属性を使用する

ありがとうございます！購読確認用の新着メールを探してください。