a要素

HTMLでは、リンクを記述することができます。

本ページでは、a要素について説明します。

a要素とは

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

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

【aの定義】
コンテンツカテゴリ フローコンテンツフレージングコンテンツ対話型コンテンツ(href属性がある場合)、認知可能コンテンツ
可能な親要素 フレージングコンテンツを包含できる要素
可能なコンテンツ トランスペアレント(以下を除く)
対話型コンテンツ、a要素、tabindex属性が使われた要素が小孫
タグの省略 不可
DOMインターフェース HTMLAnchorElement

利用例

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

【aの利用例】
<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属性の利用例は、以下のとおりです。

【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属性の利用例は、以下のとおりです。

【hreflang属性の利用例】
<a href="https://example.com/" hreflang="en">リンク先<a>

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

ping属性の利用例

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

【ping属性の利用例】
<a href="test.html" ping="count.php">テストページ<a>

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

rel属性の利用例

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

【rel属性の利用例】
<a href="test.html" rel="nofollow">テストページ<a>

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

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

【relで使える値(例)】
説明
nofollow 推奨しないリンクを示します。詳細は、「nofollowの使い方」をご参照ください。
noopener 移動先のページから、移動元のページの操作ができないようにします(セキュリティ対策)。
noreferrer 移動先のページに、リファラーを送信しないようにします(セキュリティ対策)。

target属性の利用例

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

【target属性の利用例】
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">テストページ<a>

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

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

【targetで使える値】
説明
_self 現在の表示タブ(デフォルト)
_blank 新しいタブ
_parent iframeなどで表示された場合の親のページ
_top iframeなどで表示された場合の元をたどった一番親のページ
名前 iframeなどで付けた名前

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

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

type属性の利用例

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

【type属性の利用例】
<a href="images/test.png" type="image/png">画像<a>

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

ブラウザのサポート状況

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

【パソコン】
項目 IE Ed Fx Ch Sa Op
a
download ×
href
hreflang
ping
referrerpolicy ×
rel
target
type
【スマートフォン】
項目 Sa An Op Ch Fx Sm
a
download ×
href
hreflang
ping
referrerpolicy ×
rel
target
type
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

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

サイト内で関連ページをチェック

ホームページ作成「HTMLにリンクを挿入する方法

HTML要素(タグ)一覧」に戻る