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 … 検索エンジンに対して、リンクをたどらないように指示

target

  • _blank … 新しく名前のないウィンドウを開いて表示
  • _self … 同じウィンドウまたはフレームに表示
  • _parent … 親フレームに表示
  • _top … フレームを解除してウィンドウ全体に表示
  • フレーム名またはウィンドウ名 (frameまたはiframe要素の、name属性の値) … 任意のウィンドウに表示
6.16 Frame target names - Basic HTML data types

フレームへの表示

target属性の値に、frameのname属性の値を指定します。

<a target="sample" href="index.html">link</a>

<iframe name="sample"></iframe>
link1 link2

download

リンク先をダウンロードするように促せます。

<a download href="sample.png">Download</a>

この属性をサポートしないブラウザもあります。 Can I use Download attribute Browser compatibility - <a> - HTML | MDN

Firefoxでは、リソースが同一起源の場合のみ機能します。download - <a> - HTML | MDN

Download

保存するときのファイル名を、属性値で指定できます。

<a download="default.png" href="sample.png">Download</a>
Download

data URI

href属性にdata URIで記述することで、ダウンロードさせるファイルを生成できます。Can I use Data URIs

<a download href="data:,Hello%2C%20World!">Download</a>
Download 
data:[mediatype][;base64],data

mediatypeを省略した場合は、text/plain;charset=US-ASCIIを指定したものと見なされます。

一部のブラウザでは、data:text/plain,SAMPLEのようなテキスト形式は問題を起こします。

形式 コード サンプル
テキスト "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で処理します。

参考

参考

仕様

関連ページ

HTMLの情報サイトから、まとめて検索