a要素

a要素とは

a要素は、他のページ、同一ページ内の別の場所、ファイルなどへのハイパーリンクを作成します。ハイパーリンクは、単にリンクと呼ばれることもあります。

aの定義は、以下のとおりです。

利用例

以下は、aを使ったHTMLの例です。

<a href="https://example.com/test.html">テストページ<a>

これをブラウザで表示すると、以下になります。

「テストページ」をクリックすると、https://example.com/test.htmlへ移動します。

同一サイトであれば、href="test.html"と相対URLでも記述できます。

また、href="test.html#id1"とすると、test.htmlページのIDがid1の所まで移動して表示されます。同一ページであればhref="#id1"とすると、IDがid1の所まで移動して表示されます。

属性

グローバル属性と、以下が使えます。

download

ページなどを移動するのではなく、ダウンロードさせます。値は、ダウンロードした時のファイル名です。

href

ハイパーリンクの移動先を指定します。メールアドレスや電話番号も指定できます。

hreflang

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

ping

指定したURLに、POSTメソッドのリクエストを送信します。これにより、受信側で統計情報の収集(トラッキング)などが行えます。

referrerpolicy

リファラーの情報を指定します。

rel

ハイパーリンク先との関係を示します。

target

移動先のページを開くタブやウィンドウなどを指定します。

type

リンク先のメディアタイプ(htmlやpng)を示します。例えば、text/html、image/pngなどと指定します。

次からは、各属性の利用例を示します。なお、referrerpolicyについては、リンク先をご参照ください。

download属性の利用例

download属性の利用例は、以下のとおりです。

<a href="images/test.png" download="image.png">画像のダウンロード<a>

上記により、リンクをクリックすると、test.pngがimage.pngファイル名でダウンロードされます。ファイル名を指定せずにdownloadだけ指定すると、元のファイル名(例ではtest.png)で保存されます。ブラウザの設定によっては、保存する時にファイル名を変更できます。

href属性の利用例

href属性は、すでに説明したとおり、リンク先のURLを示しますが、メールアドレスや電話番号を示すこともできます。

メールアドレスの指定

メールアドレスは、mailto:に続けて指定します。

<a href="mailto:test@example.com">メールを送る<a>

「メールを送る」をクリックすると、メールソフトの送信画面が開きます。その際の宛先は、指定したメールアドレス(上記例ではtest@example.com)になっています。

電話番号の指定

電話番号は、tel:に続けて指定します。

<a href="tel:090xxxxxxxx">090xxxxxxxx<a>

スマートフォンなどでタップすると、電話をかけることができます。

hreflang属性の利用例

hreflang属性の利用例は、以下のとおりです。

<a href="https://example.com/" hreflang="en">リンク先<a>

上記により、リンク先の言語は英語であることを示します。使える値は、グローバル属性のlangと同じです。指定しないと文字化けするとかでは、ありません。

ping属性の利用例

ping属性の利用例は、以下のとおりです。

<a href="test.html" ping="count.php">テストページ<a>

上記により、リンクをクリックすると、count.phpにPOSTメソッドのリクエストが送信されます。リクエストには、移動元URLなどの情報が付与されていて、PHPなどを利用して統計情報を採取したりできます。

rel属性の利用例

rel属性の利用例は、以下のとおりです。

<a href="test.html" rel="nofollow">テストページ<a>

上記により、リンク先を推奨しないことを示します。

rel属性で利用できる値の例は、以下のとおりです。

target属性の利用例

target属性の利用例は、以下のとおりです。

<a href="https://example.com/" target="_blank" rel="noopener noreferrer">テストページ<a>

上記により、リンクをクリックすると別タブで表示されます。他サイトにリンクしてtarget="_blank"を使う場合、通常はセキュリティを考慮してrel="noopener noreferrer"を付けます。詳細は、「リンク先を別タブやウィンドウで開く」をご参照ください。

なお、targetでは以下の値が使えます。

タブは、ブラウザの設定によっては新しいウィンドウで開きます。また、_parentと_topは、親のページがなければ_selfと同じ動きになります。

"名前"を指定すると、指定した名前を付けたiframeの内部が、リンク先のページに代わります。

type属性の利用例

type属性の利用例は、以下のとおりです。

<a href="images/test.png" type="image/png">画像<a>

上記により、リンク先がPNG形式の画像であることが示せます。指定しないと、画像が表示されないという訳ではありません。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。