このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

a要素~href属性

記事Apr. 8th,2015
July 7th,2020
リンク先を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

href”属性について

href”属性はリンク先のURLを指定します。“href”属性を指定したa”要素の内容となる要素は属性値で指定したURLへのハイパーリンクの出発点となります。値となるURLは相対パスや絶対パスで指定することができます。

href”属性を指定しない場合はa”要素プレースホルダーとなります。

指定できる値

属性値 説明
URL リンク先のURL
#ID名 リンクの到達点となる要素のid”属性の値
mailto:メールアドレス メールの送信先
tel:電話番号 発信する電話番号

リンク先となる要素に付けられたid”属性の値の先頭に“#”をつけて“href”属性の値に指定することでウェブページ内の特定の箇所へのリンクとすることができます。

また、ブラウザがサポートする“mailto:”や“tel:”などのスキームを付与することでリンクをクリックした時に特定の動作をさせることができます。

値を“mailto:メールアドレス”の形で指定することでリンクのクリックでメールソフトを起動させることができます。あて名欄に指定したメールアドレスが記入された状態でメールソフトが起動します。

値を“tel:電話番号”の形で指定することで電話発信用のリンクとすることができます。

サンプルコード

リンク

別のページへリンク
<p><a href="sample.html">リンク</a></p>
クリックでメールソフトを起動
<p><a href="mailto:emailaddress@example.com">メールする</a></p>
クリックで電話発信
<p><a href="tel:0312345678">電話する</a></p>
別のページへリンク

リンク

クリックでメールソフトを起動

メールする

クリックで電話発信

電話する

ページの特定箇所へのリンク

同じページ内の特定の箇所へリンク
<p><a href="#sample1">リンク</a></p>
別のページ内の特定の箇所へリンク
<p><a href="sample-atag1.html#sample2">リンク</a></p>
同じページ内へのリンクの到達点
<p><span id="sample1">リンクの到達点</span></p>
同じページ内の特定の箇所へリンク

リンク

別のページ内の特定の箇所へリンク

リンク

同じページ内へのリンクの到達点

リンクの到達点

href”属性の値を“#top”もしくは単純に“#”にすることで“id”属性を指定していなくても現在のページの最上部へのリンクを作成することができます。

<a href="#top">ページの先頭へ</a>
ページの先頭へ
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク