a要素
属性
| 属性 | HTML4 | HTML5 |
|---|---|---|
| download | × | ○ |
| href | ○ | ○ |
| media | × | ○ |
| ping | × | ○ |
| rel | ○ | ○ |
| target | ○ | ○ |
| charset | ○ | × |
| coords | ○ | × |
| datafld | ？ | ？ |
| datasrc | ？ | ？ |
| hreflang | ○ | ○ |
| methods | ？ | ？ |
| name | ○ | × |
| rev | ○ | × |
| shape | ○ | × |
| type | ○ | ○ |
| urn | ？ | ？ |
href
リンク先をURLで示します。この属性値の記述法についてはリンクの張り方で解説しています。
外観
href属性を設定すると、一般的なブラウザでは下線が引かれて表示され、マウスポインタを合わせるとカーソルの形状が変化します。
| コード | 表示例 |
|---|---|
<a>Click</a> |
Click |
<a href="">Click</a> |
Click |
name
これはその要素をページ内のリンク先とするための、アンカーを定義します。これはHTML5で廃止され、代替としてid属性を使うものとされています。
rel
href属性で示されたリンク先との関係を定義します。複数の値は、カンマで区切って記述します。
- nofollow … 検索エンジンに対して、リンクをたどらないように指示
- noopener … リンク先に移動するときに、リンク元へのアクセスを許可しない。Window.openerを設定しない rel="noopener" - HTML | MDN
- noreferrer … リンク先に移動するときに、Refererを含めないように指示。noopenerの指示も含む rel="noreferrer" - HTML | MDN
target
_self… 同じウィンドウまたはフレームに表示 [既定]_blank… 新しく名前のないウィンドウを開いて表示_parent… 親フレームに表示_top… フレームを解除してウィンドウ全体に表示- フレーム名またはウィンドウ名 … 任意のウィンドウに表示
_blank
window.openerによってリンク元の文書が改ざんされる問題は、rel="noopener"を付加することで対処できます。
このrel="noopener"を指定しなくても、ブラウザによっては指定されているかのように動作するものもあります。
target - <a>: アンカー要素 - HTML | MDN
「Firefox 79」からtarget=“_blank”なリンクの挙動が変更、より安全な仕様に - 窓の杜 樽井秀人 (2020/06/09)
フレーム名またはウィンドウ名
target属性の値にframeまたはiframe要素のname属性の値を指定することで、そのフレームで表示させられます。
<a target="sample" href="index.html">link</a>
<iframe name="sample"></iframe><!-- 表示対象のフレーム -->
download
リンク先をダウンロードするように促せます。
<a download href="sample.png">Download</a>
この属性をサポートしないブラウザもあります。 Can I use Download attribute Browser compatibility - <a> - HTML | MDN
Firefoxでは、リソースが同一起源の場合のみ機能します。download - <a> - HTML | MDN
保存するときのファイル名を、属性値で指定できます。
<a download="default.png" href="sample.png">Download</a>
data URI
href属性にdata URIで記述することで、ダウンロードさせるファイルを生成できます。Can I use Data URIs
<a download href="data:,Hello%2C%20World!">Download</a>
data:[mediatype][;base64],data
mediatypeを省略した場合は、text/plain;charset=US-ASCIIを指定したものと見なされます。
一部のブラウザでは、data:text/plain,SAMPLEのようなテキスト形式は問題を起こします。
- Edge … ブラウザがクラッシュすることがある DataURL Download links crash Edge - Microsoft Edge Development
- Internet Explorer … サポートされない protocols - Data URI scheme and Internet Explorer 9 Errors - Stack Overflow
| 形式 | コード | サンプル |
|---|---|---|
| テキスト | "Hello, World!"を、URLエンコード
data:text/plain,Hello%2C%20World! |
上述 |
"Hello, World!"を、base64エンコード
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ== |
Download | |
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D |
Download | |
| HTML | "<h1>Hello, World!</h1>"を、URLエンコード
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E |
Download |
| PNG | " "を、base64エンコード
data:image/png;base64,iVBORw0KGgoAAAANSUhE… |
 |
ダウンロード対象のファイルを動的に生成するには、JavaScriptで処理します。