2020.01.08 2023.01.04

<a>要素の使い方・サンプルコード

Sara

<a>

<a>要素は

他のウェブページやファイル
同じページ内の指定箇所
メールアドレス
電話番号

へのハイパーリンクを作成します。

デモ：a要素

新しいタブでGoogle.comを表示する

属性

download

href 属性で指定したファイルをダウンロードするようにウェブブラウザに示します。

download 属性に指定した値がダウンロード時のファイル名になります。

ファイル名を指定しない場合（sample.png で保存されます。）

<a href="sample.png" download>画像を保存</a>

ファイル名を指定した場合（image という名前で保存されます。）

<a href="sample.png" download="image">画像を保存</a>

href

href 属性には

他のページへのリンク
ダウンロードさせたいファイルのリンク
id 属性の値
メールアドレス
電話番号

を指定することができます。

① 他ページへのリンク

表示させたいリンクを指定することができます。

<a href="http://google.com">Googleへ移動</a>

② ダウンロードリンク

ダウンロードできるファイルを指定することができます。

<a href="sample.png" download>画像を保存</a>

③ id 属性の値

同じページ内にある id 属性の場所に移動することができます。

<a href="#message">「id="message"」の箇所へ移動</a>

④ メールアドレス

mailto:メールアドレスを指定すると、メールソフトが起動してメールを作成できます。

<a href="mailto:test@mail.com">メール送信</a>

⑤ 電話番号

携帯電話の場合は、tel:電話番号を指定するとそのまま発信することができます。

<a href="tel:0312345678">電話をかける</a>

hreflang

リンク先のファイルの言語を指定します。補足メッセージのようなもので、組み込まれている機能はありません。

<a href="#" hreflang="ja">リンク</a>

ping

ブラウザによって送信される URL のリストです。通常トラッキングに使用されます。

rel

リンク先の内容の役割をリンク種別の値で指定します。

<a href="#" rel="noreferrer">リンク</a>

参考：HTML リンク種別まとめ – HTML リファレンス

target

リンク先のファイルを開く場所・コンテキスト（ブラウザのタブ・ウィンドウなど）を指定します。

値
_self（既定値）	表示中のページと同じウィンドウにリンク先のページを表示します。
_blank	新しいタブ・ウィンドウでリンクを開きます。
_parent	現在閲覧中のタブ・ウィンドウの親コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。
_top	トップレベル（親を持たない）の閲覧コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。

新しいタブでリンクを表示するサンプル

<a href="http://google.com" target="_blank">Googleを表示</a>

type

リンク先の MIME タイプを指定します。補足メッセージのようなもので、組み込まれている機能はありません。

<a href="sample.png" type="image/png" download>PNG画像を保存</a>

参考：MIME タイプ – HTML リファレンス

グローバル属性

全ての HTML 要素に共通して使用できるグローバル属性はこちら

廃止された属性

charset, coords, name, rev, shape 属性は廃止されました。

使用例

例① リンクを新しいタブで開く

<a href="http://google.com" target="_blank">Googleを表示</a>

例② ファイルのダウンロードリンク

<a href="sample.png" download>画像を保存</a>

例③ メールソフトの起動

<a href="mailto:test@mail.com">メール送信</a>

例④ 電話をかける

<a href="tel:0312345678">電話をかける</a>

対応ブラウザ