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

<a>

<a>要素は

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

属性

download

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

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

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

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

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

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

href

href 属性には

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

① 他ページへのリンク

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

<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

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

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

<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>

対応ブラウザ

関連するタグ

 
HTML タグ一覧はこちら

ABOUT ME

Sara

「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂