リファレンス

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

 

<a>

<a>要素は

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

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

 
 

属性

download

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

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

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

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

 

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

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

 
 
 

href

href 属性には

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

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

① 他ページへのリンク

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

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

 
 
 

対応ブラウザ

 
 
 

関連するタグ

 
HTML タグ一覧はこちら

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

 

 
Code for Fun プログラミング講座では「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで学ぶことができます。

  • 何か一つ形にしてみたい!
  • 次に何をして良いか分からない…
  • プログラミングに挫折しそう…

という方にオススメです。

詳しくみる

guest

CAPTCHA


0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx