<a>: アンカー要素
===========

**`<a>`** は HTML の要素（*アンカー*要素）で、`href` 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。

`<a>` の内容は、リンク先を示すもの**であるべきです**。`href` 属性が存在する場合、`<a>` 要素にフォーカスがある状態で Enter キーを押すと起動します。

試してみましょう
--------

属性
--

この要素にはグローバル属性があります。

`download`

ブラウザーがリンクされた URL をダウンロードとして扱うようにします。`filename` 値があってもなくても構いません。

* 値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。
    + HTTP の `Content-Disposition` ヘッダー
    + URL のパスの最後の部分
    + メディア種別（`Content-Type` ヘッダー、 `data:` URL の先頭、 `blob:` URL の `Blob.type` から）
* 値を定義すると、ファイル名として提案します。 `/` および `\` はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。

**メモ:**

* `download` は同一オリジンの URL と、 `blob:`、 `data:` の各スキームでのみ動作します。
* ブラウザーがダウンロードをどのように扱うかは、ブラウザー、ユーザーの設定、その他の要因によって異なります。ダウンロードを開始する前にユーザーにプロンプトが表示されたり、ファイルが自動的に保存されたり、外部のアプリケーションまたはブラウザー自体で自動的に開いたりすることがあります。
* `Content-Disposition` ヘッダーが `download` とは異なる情報を持っていた場合、動作結果は様々です。
    + ヘッダーが `filename` を指定した場合、そちらが `download` 属性で指定されたファイル名より優先されます。
    + ヘッダーが `inline` の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。Firefox の（82 以前の）古い版では、ヘッダーが優先され、コンテンツがインラインで表示されます。

`href`

ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。

* ページの節を示すフラグメント URL
* テキストフラグメントで指定されたテキストの部分
* メディアファイルの一部を示すメディアフラグメント
* 電話番号を示す `tel:` URL
* メールアドレスを示す `mailto:` URL
* SMS テキストメッセージを示す `sms:` URL
* ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは `registerProtocolHandler()` を使用することができます。

`hreflang`

リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、 `lang` グローバル属性と同じです。

`ping`

空白で区切られた URL のリストです。リンクをたどるとき、ブラウザーは `POST` リクエストを指定された URL に、 `PING` を本文として送信します。通常、トラッキングに使用されます。

`referrerpolicy`

リンクをたどるときにどれだけのリファラーを送信するかです。

* `no-referrer`: `Referer` ヘッダーは送信されません。
* `no-referrer-when-downgrade`: `Referer` ヘッダーはオリジンに TLS (HTTPS) がない場合は送信されません。
* `origin`: 送信されるリファラーは、参照元ページのオリジンのみに限定されます。すなわちスキーム、ホスト名、ポート番号です。
* `origin-when-cross-origin`: 他のオリジンに送信されるリファラーは、スキーム、ホスト名、ポート番号に限定されます。同じオリジン内での移動の場合はパスが含まれます。
* `same-origin`: リファラーは同じオリジンには送られますが、オリジン間リクエストではリファラー情報が含まれません。
* `strict-origin`: プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) は、文書のオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信しません。
* `strict-origin-when-cross-origin` (default): 同一オリジンへのリクエストを行う際には URL 全体が送信され、プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) はオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信されません。
* `unsafe-url`: リファラーにはオリジン*および*パスが含まれます（ただしフラグメント、パスワード、ユーザー名は含まれません）。**この値は安全ではありません**。オリジンとパスを TLS で保護されたリソースから安全ではないオリジンに漏洩させるからです。

`rel`

リンク先の URL との関係を示す、空白で区切られたリンク種別のリストです。

`target`

リンク先の URL を表示する場所、*閲覧コンテキスト*（タブ、ウィンドウ、`<iframe>`）の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。

* `_self`: 現在の閲覧コンテキストです。（既定値）
* `_blank`: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。
* `_parent`: 現在の親の閲覧コンテキストです。親がない場合は、 `_self` と同じ振る舞いをします。
* `_top`: 最上位の閲覧コンテキスト（現在のコンテキストの祖先である "最上位" のコンテキスト）です。親の閲覧コンテキストがない場合は、 `_self` と同じ動作をします。

**メモ:** `target="_blank"` を `<a>` 要素に設定すると、暗黙的に `rel` の動作は `rel="noopener"` が設定されたかのように動作し、 `window.opener` を設定しません。

`type`

リンク先 URL の MIME タイプの形式を表すヒントです。組み込まれている機能はありません。

### 非推奨の属性

`charset` 
非推奨

リンク先 URL の文字エンコーディングのヒントでした。

**メモ:** この属性は廃止されており、**ページ作者が使用すべきではありません**。リンク先の URL で HTTP の `Content-Type` ヘッダーを使用してください。

`coords` 
非推奨

`shape` 属性とともに使用されます。カンマ区切りの座標のリストです。

`name` 
非推奨

ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば `id` 属性と `name` 属性を `<a>` 要素内で同時に使用できました。

**メモ:** 代わりにグローバル属性の `id` を使用してください。

`rev` 
非推奨

この属性は、逆方向のリンクを指定します。 `rel` 属性と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。

`shape` 
非推奨

イメージマップ内のハイパーリンクの領域の形状です。

**メモ:** イメージマップについては `<area>` 要素を使用してください。

例
-

### 絶対 URL へのリンク

#### HTML


```html
<a href="https://www.mozilla.com">Mozilla</a>
```


#### 結果

### 相対 URL へのリンク

#### HTML


```html
<a href="//example.com">スキーム相対 URL</a>
<a href="/ja/docs/Web/HTML">オリジン相対 URL</a>
<a href="./p">ディレクトリー相対 URL</a>
```


```
a {
  display: block;
  margin-bottom: 0.5em;
}
```


#### 結果

### 同じページの要素へのリンク


```html
<!-- 以下のセクションにリンクする <a> 要素 -->
<p><a href="#Section\_further\_down">下記の見出しまでジャンプ</a></p>

<!-- リンク先の見出し -->
<h2 id="Section\_further\_down">さらに下のセクション</h2>
```


#### 結果

**メモ:** `href="#top"` または空のフラグメント (`href="#"`) を使用すると、現在のページの先頭にリンクすることができると、 HTML 仕様書で定義されています。

### メールアドレスへのリンク

メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 `mailto:` スキームを使用してください。


```html
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
```


#### 結果

件名や本文を含めるなど、`mailto` URL スキームの詳細については、電子メールのリンクまたは RFC 6068 をご覧ください。

### 電話番号へのリンク


```html
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>
```


#### 結果

`tel:` リンクは端末の能力によって様々な動作をします。

* 携帯電話ではその番号に自動ダイヤルします。
* 多くのオペレーティングシステムには、Skype や FaceTime のように電話をかけるプログラムがあります。
* ウェブサイトは `registerProtocolHandler` によって `web.skype.com` などを用いて電話を掛けることができます。
* 他にも、連絡先の電話番号を保存したり、他の端末へ電話番号を送信したりする動作があります。

`tel` URL スキームについての構文、追加機能、その他の詳細について、詳しくは RFC 3966 をご覧ください。

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

`<canvas>` 要素の内容を画像として保存するには、`href` に JavaScript で生成したキャンバスのデータが入った `data:` URL、`download` 属性にダウンロードする PNG ファイルのファイル名を指定したリンクを作成します。

#### 保存リンクのついた描画アプリ

##### HTML


```html
<p>
  マウスボタンを押しっぱなしにして動かすと描画されます。
  <a href="" download="my\_painting.png">絵をダウンロード</a>
</p>

<canvas width="300" height="300"></canvas>
```


##### CSS


```css
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
```


##### JavaScript


```js
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI \* 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );
```


##### 結果

セキュリティとプライバシー
-------------

`<a>` 要素は、ユーザーのセキュリティやプライバシーに影響を及ぼす可能性があります。詳細情報については `Referer` ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。

`target="_blank"` を `rel="noreferrer"` や `rel="noopener"` なしで使用すると、ウェブサイトが `window.opener` API 搾取攻撃を受けやすくなりますが、新しい版のブラウザーでは `target="_blank"` を設定すると、`rel="noopener"` と同じ保護が提供されます。詳しくはブラウザーの互換性を参照してください。

アクセシビリティ
--------

### 強力なリンクテキスト

リンクの内容は、文脈から外れたとしても、**リンクの行き先を示すべきです**。

#### アクセシビリティに対応していない貧弱なリンクテキスト

よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。


```html
<p>私たちの製品については<a href="/products">こちら</a>をご覧ください。</p>
```


##### 結果

#### 強力なリンクテキスト

幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。


```html
<p><a href="/products">私たちの製品について</a>、詳しくご覧ください。</p>
```


##### 結果

支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。

### onclick イベント

よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、`href` を `#` または `javascript:void(0)` に設定してページの再読み込みを防ぎ、`click` を待ち受けするようにするというものがあります。

これらの偽の `href` 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。

代わりに `<button>` を使用してください。通常、**アンカーは適切な URL を使用して移動するためだけに使用するべきです**。

### 外部リンクおよび HTML 以外のリソースへのリンク

リンクを新しいタブやウィンドウで開くために `target="_blank"` を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。

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

#### 新しいタブやウィンドウを開くリンク


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


##### 結果

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


```html
<a href="2017-annual-report.ppt">2017 年次レポート (PowerPoint)</a>
```


リンクの動作を示すためにアイコンを使用する場合は、alt テキストを確実に入れてください。


```html
<a target="\_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(新しいタブで開く)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 年次レポート
  <img alt="(PowerPoint ファイル)" src="ppt-icon.svg" />
</a>
```


##### 結果

* WebAIM: Links and Hypertext - Hypertext Links
* MDN / WCAG を理解する、ガイドライン 3.2
* G200: Opening new windows and tabs from a link only when necessary
* G201: Giving users advanced warning when opening a new window
### スキップリンク

**スキップリンク**は `<body>` コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。


```html
<body>
  <a href="#content" class="skip-link">メインコンテンツへスキップ</a>

  <header>…</header>

  <!-- スキップリンクがたどり着く位置 -->
  <main id="content"></main>
</body>
```



```css
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}
```


#### 結果

スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。

スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。

* WebAIM: "Skip Navigation" Links
* How-to: Use Skip Navigation links
* MDN / WCAG を理解する ― ガイドライン 2.4 の解説
* Understanding Success Criterion 2.4.1
### 大きさと近接性

#### 大きさ

リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。少なくとも 44×44 CSS ピクセルの大きさであることが推奨されています。

散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。

* Understanding Success Criterion 2.5.5: Target Size
* Target Size and 2.5.5
* Quick test: Large touch targets

#### 近接性

リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。

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

* Hand tremors and the giant-button-problem
技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、
 記述コンテンツ、
 対話型コンテンツ、知覚可能コンテンツ。
  |
| 許可されている内容 | 透過的コンテンツ、ただし子孫に
 対話型コンテンツ または
 a 要素をがないもの、および
 tabindex 属性が指定された子孫がないもの。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素、ただし他の `<a>` 要素でないもの。 |
| 暗黙の ARIA ロール | `link` （`href` 属性がある場合）、
 それ以外は
 `generic` (en-US) |
| 許可されている ARIA ロール | `href` 属性がある場合* `button`
* `checkbox`
* `menuitem` (en-US)
* `menuitemcheckbox` (en-US)
* `menuitemradio` (en-US)
* `option`
* `radio`
* `switch`
* `tab`
* `treeitem` (en-US)

`href` 属性がない場合* すべて
 |
| DOM インターフェイス | `HTMLAnchorElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-a-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<link>` は `<a>` と似ていますが、ユーザーには見えないメタデータへのハイパーリンクのためのものです。
* `:link` は CSS の擬似クラスで、 `<a>` 要素に有効な `href` 属性がついている場合に一致します。
* `:visited` は CSS の擬似クラスで、`<a>` 要素の `href` 属性が、過去にユーザーが訪問したことのある URL である場合に一致します。
* `:any-link` は CSS の擬似クラスで、`<a>` 要素に `href` 属性がある場合に一致します。
* テキストフラグメントは、URL に追加するユーザーエージェント指示で、コンテンツ作成者が ID を使用せずに、ページ上の固有のテキストにリンクすることを可能にするものです。