レンサバ比較ガイド

<a>タグの意味と使い方

HTMLリファレンス

<a>タグはハイパーリンクを意味し、別のページやページ内の特定の位置へリンクさせるときに使います。

目次
対応ブラウザ
使用頻度
HTML4とHTML5での違い
属性

対応ブラウザ

  • Chrome
  • Firefox
  • IE
  • Safari
  • Opera

使用頻度

ほぼ必ずと言っていいほど使用します。

HTML4とHTML5での違い

HTML4では<a>タグはハイパーリンクかアンカーの意味でした。
HTML5では<a>タグはハイパーリンクであることはもちろん、ハイパーリンクのプレースホルダーにもなります。

HTML5で追加された属性 downloadmedia
HTML5で廃止された属性 namecharsetrevshapecoords

属性

href

  • HTML5
  • HTML4

リンク先文書のURLまたはURLフラグメントを指定します。
URLはhttp以外のプロトコルにも適用でき、ftp:、mailto:、file:なども動作します。
URLフラグメントは「#」で始まるリンク先の一を指定します。リンク先の一は指定のidを持つ要素の位置です。

HTML5ではhref属性はプレースホルダーリンクを生成することができます。プレースホルダーリンクはクリックしてもどこにも移動しません。

記述例
<a href="URL">リンク先テキスト</a>

target

  • HTML5
  • HTML4

target属性はリンク先の開き方を指定します。

_blank 別画面を開いてリンク
_parent ひとつ上の親フレームにリンク
_self リンク元と同じフレームにリンク
_top フレームをすべて解除してリンク
フレーム名 指定した名前のフレームにリンク
記述例
<a href="URL" target="_blank">リンク先テキスト</a>

download

  • HTML5
  • HTML4

リンク先のリソースをダウンロードさせる目的のリンクであることを示します。
値を設定することでダウンロードさせる時のファイル名を指定できます。

記述例
<a download="FILE">ダウンロード</a>

media

  • HTML5
  • HTML4

メディア、デバイスを指定します。
HTML5 の草案で検討されていましたが、最終案では削除されました

name

  • HTML5
  • HTML4

name属性はページ内のリンク先の場所の名前を付けるのに使用します。
HTML5ではname属性は廃止されid属性で名前を付けるようにします。

charset

  • HTML5
  • HTML4

リンク先の文字コードを指定します。

記述例
<a href="URL" charset="Shift_JIS">リンク先テキスト</a>

hreflang

  • HTML5
  • HTML4

リンク先の言語を指定します

記述例
<a href="URL" hreflang="ja">リンク先テキスト</a>

type

  • HTML5
  • HTML4

リンク先のMIMEタイプを指定します

記述例
<a href="URL" type="text/html">リンク先テキスト</a>

rel

  • HTML5
  • HTML4

この文書から見たリンク先の文書との関係を記述します。

記述例
<a href="URL" rel="next">リンク先テキスト</a>
<a href="URL" rel="previous">リンク先テキスト</a>
<a href="URL" rel="parent">リンク先テキスト</a>

rev

  • HTML5
  • HTML4

リンク先から見たこの文書との関係を記述します。

記述例
<a href="URL" rev="next">リンク先テキスト</a>
<a href="URL" rev="previous">リンク先テキスト</a>
<a href="URL" rev="parent">リンク先テキスト</a>

shape

  • HTML5
  • HTML4

リンク領域の形状を示す

rect 四角形
circle 円形
poly 多角形
default 画像全体

coords

  • HTML5
  • HTML4

リンク領域の各座標を示す

rectの場合 左上と右下の角の座標(x, y, x, y)
circleの場合 中心点の座標と半径(x, y, 半径)
polyの場合 すべての角の座標(x, y, x, y ...)