このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

a要素/リンク

記事Apr. 8th,2015
Nov. 17th,2019
ハイパーリンクを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

概要

a”要素はhref”属性を指定した場合ハイパーリンクを表します。

href”属性を指定しない場合プレースホルダーを表します。まだリンク先がまだ存在しない、もしくは存在したが削除された場合などにダミーリンクとすることができます。

サンプルコード

<p><a href="sample.html">リンク</a></p>

属性と値

属性
属性 説明 説明
任意属性
グローバル属性
href="" リンク先の指定 URL リンク先のURL
#ID名 リンクの到達点となる要素のid”属性の値
target="" リンク先の表示方法 _blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示
download=""HTML5で追加 ダウンロードさせるかどうか、ダウンロード時のファイル名 ファイル名 ダウンロード時のファイル名
ping=""HTML Living Standardで定義 pingの送信先 URL pingの送信先
rel="" 現在の文書から見たリンク先との関係 リンクタイプ 現在の文書から見たリンク先との関係
hreflang="" リンク先の記述言語 言語コード リンク先が記述されている言語
type="" リンク先のMIMEタイプ MIMEタイプ リンク先のMIMEタイプ
referrerpolicy=""HTML5.2で追加 リファラーポリシーを指定 リファラーポリシー リファラーポリシー
廃止された属性
charset=""注意 リンク先の文字エンコーディング 文字エンコーディング リンク先の文字エンコーディング
name=""注意 到達点として指定するための名前 文字列 固有の識別名
rev=""注意 リンク先から見た現在の文書との関係 リンクタイプ リンク先から見た現在の文書との関係
accesskey="" 要素にアクセスキーを割り当てる 文字 ユニコード1文字によるアクセスキー
shape=""注意 イメージマップの領域の形状 rect 長方形
circle 円形
poly 多角形
default 画像全体
coords=""注意 イメージマップの領域の座標 左上の角のX座標,左上の角のY座標,右下の角のX座標,右下の角のY座標 shape”属性の値が“rect”の場合】左上の角の座標と右下の角の座標
中心点のX座標,中心点のY座標,半径 shape”属性の値が“circle”の場合】中心点の座標と半径
X座標,Y座標,X座標,Y座標,... shape”属性の値が“poly”の場合】すべての角の座標を順番に
tabindex="" フォーカスの可否とフォーカスの移動順序を指定する 正の整数 順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする)
0 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
負の整数 フォーカス可能だが順次ナビゲーションには加わらない
onfocus="" フォーカスされた時に実行されるスクリプト スクリプト フォーカスされた時に実行されるスクリプト
onblur="" フォーカスを失った時に実行されるスクリプト スクリプト フォーカスを失った時に実行されるスクリプト

href”属性を指定しない場合はtarget”属性download”属性ping”属性rel”属性rev”属性media”属性hreflang”属性type”属性referrerpolicy”属性は指定できません。

プレースホルダーとしての“a”要素

href”属性を指定していない“a”要素はプレースホルダー(場所取り)を表します。リンク先が準備中である場合など今後リンクを指定する可能性がある、あるいはリンク先が削除された場合に使用できます。

プレースホルダーとして使用する(href”属性を指定しない)場合はtarget”属性download”属性ping”属性rel”属性rev”属性media”属性hreflang”属性type”属性referrerpolicy”属性は指定できません。

サンプルコード

<p><a>リンク</a></p>

仕様書

a”要素はHTML1.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<a>
定義あり

定義あり

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
href=""
定義あり

定義あり

定義あり

定義あり

定義あり
target=""
定義あり

定義あり

定義あり

定義あり

定義あり
download=""
定義なし

定義あり

定義あり

定義あり

定義あり
ping=""
定義なし

定義なし

定義なし

定義なし

定義あり
rel=""
定義あり

定義あり

定義あり

定義あり

定義あり
hreflang=""
定義あり

定義あり

定義あり

定義あり

定義あり
type=""
定義あり

定義あり

定義あり

定義あり

定義あり
referrerpolicy=""
定義なし

定義なし

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
charset=""
定義あり

削除

削除

削除

削除
name=""
定義あり

削除

削除

削除

削除
rev=""
定義あり

削除

定義あり

定義あり

削除
accesskey=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
shape=""
定義あり

削除

削除

削除

削除
coords=""
定義あり

削除

削除

削除

削除
tabindex=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
onfocus=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
onblur=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性

各属性の詳細

href”属性

概要

href”属性はリンク先のURLを指定します。“href”属性を指定した“a”要素の内容となるテキストや画像等は属性値で指定したURLへのハイパーリンクの出発点となります。値となるURLは相対パスと絶対パスのどちらでも指定することができます。

相対パス”は現在位置を基準として目的のファイルとの相対的な位置で指定する方法。“sample.html”や“directory/sample.html”等。
絶対パス”は現在位置とは関係なく絶対的な位置で指定する方法。“http://...”で始まるURL。

href”属性を指定しない場合は“a”要素はプレースホルダーとなります。

指定できる値

属性値 説明
URL リンク先のURL
#ID名 リンクの到達点となる要素のid”属性の値

リンク先となる要素に付けられたid”属性の値の先頭に“#”をつけて“href”属性の値に指定することでウェブページ内の特定の箇所へのリンクとすることができます。

また、ブラウザがサポートする“mailto:”や“tel:”などのスキームを付与することでリンクをクリックした時に特定の動作をさせることができます。

値を“mailto:メールアドレス”の形で指定することでリンクのクリックでメールソフトを起動させることができます。あて名欄に指定したメールアドレスが記入された状態でメールソフトが起動します。

ウェブページ上にメールアドレスを記載するとスパムボット等によりメールアドレスを収集され迷惑メールの被害に遭う可能性が格段に高まります。リスクを理解し、また対策をしたうえでメールアドレスを記載するようにしてください。

値を“tel:電話番号”の形で指定することで電話発信用のリンクとすることができます。

スマートフォン用の機能のためパソコン用のブラウザではデバイスに電話発信できるソフトウェアがインストールされている場合以外は正しく動作しません。

サンプルコード

別のページへリンク
<p><a href="sample.html">リンク</a></p>
同じページ内の特定の箇所へリンク
<p><a href="#sample1">リンク</a></p>
別のページ内の特定の箇所へリンク
<p><a href="sample-atag1.html#sample2">リンク</a></p>
同じページ内へのリンクの到達点
<p><span id="sample1">リンクの到達点</span></p>
クリックでメールソフトを起動
<p><a href="mailto:emailaddress@example.com">メールする</a></p>
クリックで電話発信
<p><a href="tel:0312345678">電話する</a></p>
*メールアドレスと電話番号はダミーです。
別のページへリンク

リンク

同じページ内の特定の箇所へリンク

リンク

別のページ内の特定の箇所へリンク

リンク

同じページ内へのリンクの到達点

リンクの到達点

クリックでメールソフトを起動

メールする

クリックで電話発信

電話する

*メールアドレスと電話番号はダミーです。

a”要素の内容を画像にすることで画像にリンクを設定することができます。

<p><a href="sample.html"><img src="sample.png" alt="サンプルのページへ"></a></p>

サンプルのページへ

HTML4までは“ブロックレベル要素”を“a”要素の中に配置することはできませんでしたが、HTML5ではその制約がなくなりました。ただし、インタラクティブ・コンテンツを含む場合は配置することができません。

<a href="sample.html">
<h1>バナナの特徴</h1>
<p>「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。</p>
</a>

HTML4では要素が“ブロックレベル要素”と“インライン要素”に分類され、どの要素の中にどの要素を配置できるかのルールが定義されていました。
ブロックレベル要素”は見出し・段落・表など、文書を構成する基本となる要素で、一つのブロックとして認識されます。
インライン要素”は文章の一部を構成する要素で、文章の中の一部を強調したり、書体を変えたりする要素が含まれます。
“ブロックレベル要素”の中に“インライン要素”や他の“ブロックレベル要素”を配置することはできましたが、“インライン要素”の中に“ブロックレベル要素”を配置することはできませんでした。
HTML5ではこれらの分類が廃止されました。

HTML5では“href”属性の値を“#top”にすることで“id”属性を指定していなくてもページの最上部へのリンクを作成することができます。

<a href="#top">ページの先頭へ</a>

target”属性

概要

target”属性はリンク先をどのブラウジング・コンテキストに表示するかを指定します。

ブラウジング・コンテキスト”は文書(ウェブページ)が表示される環境のことで、通常はブラウザのウィンドウやタブ、iframe”要素のことを指します。

href”属性を指定していない“a”要素には指定できません。

指定できる値

属性値 説明
_blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示

_parent”と“_top”は上位のブラウジング・コンテキストがない場合は“_self”と同じになります。

iframe”要素によって入れ子にされたブラウジング・コンテキストは“target”属性にその“name”属性の値を指定することでリンク先を表示するブラウジング・コンテキストとして指定することができます。

入れ子になったブラウジング・コンテキストの中に配置されたリンクから上位のブラウジング・コンテキストにリンク先を表示する場合“_parent”もしくは“_top”を使用します。

サンプルコード

新しいブラウジング・コンテキストに表示
<p><a href="sample.html" target="_blank">リンク</a></p>
現在のブラウジング・コンテキストに表示
<p><a href="sample.html" target="_self">リンク</a></p>
1つ上位のブラウジング・コンテキストに表示
<p><a href="sample.html" target="_parent">リンク</a></p>
最上位のブラウジング・コンテキストに表示
<p><a href="sample.html" target="_top">リンク</a></p>
任意のブラウジング・コンテキストに表示
<p><a href="sample.html" target="example">リンク</a></p>
ブラウジング・コンテキスト“example
<p><iframe src="sample2.html" style=" width: 100%; height: 300px;" name="example"></iframe></p>
新しいブラウジング・コンテキストに表示

リンク

現在のブラウジング・コンテキストに表示

リンク

1つ上位のブラウジング・コンテキストに表示

リンク

最上位のブラウジング・コンテキストに表示

リンク

任意のブラウジング・コンテキストに表示

リンク

ブラウジング・コンテキスト“example

download”属性HTML5で追加

概要

download”属性はリンク先をダウンロードさせるかを指定し、属性値はダウンロード時のファイル名を指定します。

属性値を指定しない場合は元のファイル名がそのままダウンロード時のファイル名になります。

href”属性を指定していない“a”要素には指定できません。

指定できる値

属性値 説明
ファイル名 ダウンロード時のファイル名

サンプルコード

ファイル名を指定してダウンロード
<p><a href="sample.png" download="サンプルの画像">ダウンロードする</a></p>
ファイル名を指定せずダウンロード
<p><a href="sample.png" download>ダウンロードする</a></p>
ファイル名を指定してダウンロード

ダウンロードする

ファイル名を指定せずダウンロード

ダウンロードする

ping”属性HTML Living Standardで定義

概要

ping”属性はリンクをクリックしたときに送信するpingの送信先を指定する属性です。リンクがクリックされるとユーザーにはhref”属性で指定されたリンク先が表示されますが、同時にバックグラウンドで指定された送信先に“Ping-From”ヘッダーと“Ping-To”ヘッダーが含まれるPOSTメソッドのHTTPリクエストを送信します。

ping”属性にCGIなどの集計用プログラムを指定することでリンクがクリックされたときにユーザーが閲覧していた文書のURLとリンク先のURLを記録することができます。

href”属性を指定していない“a”要素には指定できません。

指定できる値

属性値 説明
URL pingの送信先

値は半角スペースで区切ることで複数指定することができます。

サンプルコード

<p><a href="sample.html" ping="counting.php">リンク</a></p>

rel”属性

概要

rel”属性は文書とリンク先との関係を示します。属性値はリンクタイプで指定します。

href”属性を指定していない“a”要素には指定できません。

指定できる値

属性値 説明
リンクタイプ 現在の文書から見たリンク先との関係

alternate”とhreflang”属性との併用で翻訳版、media”属性との併用で別のデバイス向けの文書を示すことができます。

サンプルコード

リンク先が文書の翻訳版であることを示す
<p><a href="sample.html" rel="alternate" hreflang="en">英語版</a></p>

hreflang”属性

概要

hreflang”属性はリンク先の記述言語を示します。属性値は言語コードで指定します。

href”属性を指定していない“a”要素には指定できません。

指定できる値

属性値 説明
言語コード リンク先が記述されている言語

rel="alternate"との併用でリンク先の文書が文書の翻訳版であることを示すことができます。

サンプルコード

リンク先の文書が中国語で記述されていることを示す
<p><a href="sample.html" hreflang="zh-CN">リンク</a></p>
リンク先が文書の英語版であることを示す
<p><a href="en/sample.html" rel="alternate" hreflang="en">英語版</a></p>

type”属性

概要

type”属性はリンク先のデータの種類を示します。属性値はMIMEタイプで指定します。

href”属性を指定していない“a”要素には指定できません。

指定できる値

属性値 説明
MIMEタイプ リンク先のMIMEタイプ

サンプルコード

リンク先がPDF文書であることを示す
<p><a href="report.pdf" type="application/pdf">報告書</a></p>

referrerpolicy”属性HTML5.2で追加

概要

referrerpolicy”属性はリンク先を読み込む時のリファラーポリシーを指定します。

href”属性を指定していない“a”要素には指定できません。

リファラーポリシー”はリンク先を読み込む時に“リファラー”を送信するかの決まり事です。“リファラー”はブラウザが通常リンク先を読み込む時のHTTPリクエストに含む参照元の文書のURLのことです。リファラーポリシーによってリファラーを送信するかどうかを制御することができます。

referrerpolicy”属性を指定しない場合や、空の値を指定する場合の規定値は現在の文書から見てリンク先のセキュリティーレベルが低い(HTTPSからHTTPへのリンクなど)場合はリファラーを送信しない“no-referrer-when-downgrade”となります。

HTML5.2で追加された新しい属性のため古いバージョンのブラウザでは動作しない可能性があります。

指定できる値

属性値 説明
リファラーポリシー リファラーポリシー

サンプルコード

リンク先を開く時にリファラーを送信しない
<p><a href="http://www.sample.com/sample.html" referrerpolicy="no-referrer">リンク</a></p>

廃止された属性

charset”属性注意

概要

charset”属性はリンク先の文字エンコーディングを指定する属性です。

href”属性を指定していない“a”要素には指定できません。

HTML5ではこの属性は廃止されていますので使用するべきではありません。

代替方法

代替方法はありません。

指定できる値

属性値 説明
エンコーディング名 リンク先の文字エンコーディング

サンプルコード

<p><a href="sample.html" charset="UTF-8">リンク</a></p>

name”属性注意

概要

name”属性はページ内リンクの到達点として使用するための属性です。

値として固有の識別子を指定し、その値に“#”をつけてhref”属性の値とすることでその箇所へのリンクとすることができます。“name”属性で指定する値は同じ文書内で重複することはできません。

href”属性を指定しなければその到達点はリンクにはなりませんが、href”属性と併用することもできます。

HTML5でこの属性は廃止されています。古いブラウザを考慮する必要がない場合は使用するべきではありません。

代替方法

グローバル属性id”属性をリンク先としたい要素に指定することで同様にウェブページ内の特定の箇所へのリンクとすることができます。

指定できる値

属性値 説明
文字列 固有の識別名

サンプルコード

同じページ内の特定の箇所へリンク
<p><a href="#sample2">リンク</a></p>
同じページ内へのリンクの到達点
<p><a name="sample2">リンクの到達点</a></p>

id”属性と併用することで古いブラウザでの表示に対応することができます。ただし、値は同じでなければいけません。

<p><a name="sample2" id="sample2">リンクの到達点</a></p>

rev”属性注意

概要

rev”属性はリンク先から見たリンク元の文書との関係を示します。属性値はリンクタイプで指定します。

属性値はrel”属性と逆の関係のものを指定します。

href”属性を指定していない“a”要素には指定できません。

rev”属性はHTML5で一度廃止されましたがHTML5.1で再び追加されました。ただし、“HTML Living Standard”では定義されていません。

指定できる値

属性値 説明
リンクタイプ リンク先から見た現在の文書との関係

サンプルコード

現在の文書がリンク先の翻訳版であることを示す
<p><a href="sample.html" rev="alternate" hreflang="en">英語版</a></p>

accesskey”属性

概要

accesskey”属性は要素にアクセスキー、もしくはショートカットキーを指定する属性です。“accesskey”属性で指定されたキーボードのキーを押すことで要素にフォーカスしたり操作したりできるようになります。

accesskey”属性はHTML5からグローバル属性になりました。“a”要素の属性としては定義されていませんが引き続き使用することが可能です。

accesskey”属性についてはこちらのページを参照。
グローバル属性-HTMLタグ辞書

指定できる値

属性値 説明
文字 ユニコード1文字によるアクセスキー

サンプルコード

<p><a href="sample.html" accesskey="Z">リンク</a></p>

shape”属性注意

概要

shape”属性はイメージマップの領域の形状を指定する属性です。イメージマップの領域の座標はcoords”属性で指定します。

HTML5ではこの属性は廃止されていますので使用するべきではありません。

代替方法

area”属性を使用してイメージマップの領域を指定します。

指定できる値

属性値 説明
rect 長方形
circle 円形
poly 多角形
default 画像全体

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample1">

<map name="sample1">
<ul>
<li><a href="sample1.html" shape="rect" coords="8,32,72,99">長方形</a></li>
<li><a href="sample2.html" shape="poly" coords="97,103,30,193,163,193">多角形</a></li>
<li><a href="sample3.html" shape="circle" coords="146,59,47">円形</a></li>
</ul>
</map>

coords”属性注意

概要

coords”属性はイメージマップの領域の座標を指定する属性です。イメージマップの領域の形状はshape”属性で指定します。

HTML5ではこの属性は廃止されていますので使用するべきではありません。

代替方法

area”属性を使用してイメージマップの領域を指定します。

指定できる値

属性値 説明
左上の角のX座標,左上の角のY座標,右下の角のX座標,右下の角のY座標 shape”属性の値が“rect”の場合】左上の角の座標と右下の角の座標
中心点のX座標,中心点のY座標,半径 shape”属性の値が“circle”の場合】中心点の座標と半径
X座標,Y座標,X座標,Y座標,... shape”属性の値が“poly”の場合】すべての角の座標を順番に

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample1">

<map name="sample1">
<ul>
<li><a href="sample1.html" shape="rect" coords="8,32,72,99">長方形</a></li>
<li><a href="sample2.html" shape="poly" coords="97,103,30,193,163,193">多角形</a></li>
<li><a href="sample3.html" shape="circle" coords="146,59,47">円形</a></li>
</ul>
</map>

tabindex”属性

概要

tabindex”属性はキーボードによる順次ナビゲーションによってフォーカスできるかどうかとフォーカスの移動順序を指定する属性です。

tabindex”属性はHTML5からグローバル属性になりました。“a”要素の属性としては定義されていませんが引き続き使用することが可能です。

tabindex”属性についてはこちらのページを参照。
グローバル属性-HTMLタグ辞書

指定できる値

属性値 説明
正の整数 順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする)
0 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
負の整数 フォーカス可能だが順次ナビゲーションには加わらない

サンプルコード

<p><a href="sample.html" tabindex="0">リンク</a></p>

onfocus”属性

概要

onfocus”属性はフォーカスされたときに実行するスクリプトする属性です。

onfocus”属性はHTML5からグローバル属性になりました。“a”要素の属性としては定義されていませんが引き続き使用することが可能です。

onfocus”属性についてはこちらのページを参照。
イベント属性-HTMLタグ辞書

指定できる値

属性値 説明
スクリプト フォーカスされた時に実行されるスクリプト

サンプルコード

<p><a href="sample.html" onfocus="alert('Hello')">リンク</a></p>

onblur”属性

概要

onblur”属性はフォーカスを失った時に実行されるスクリプトを指定する属性です。

onblur”属性はHTML5からグローバル属性になりました。“a”要素の属性としては定義されていませんが引き続き使用することが可能です。

onblur”属性についてはこちらのページを参照。
イベント属性-HTMLタグ辞書

指定できる値

属性値 説明
スクリプト フォーカスを失った時に実行されるスクリプト

サンプルコード

<p><a href="sample.html" onblur="alert('Hello')">リンク</a></p>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク