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

a”要素~“href”属性

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

href”属性について

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

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

指定できる値

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

リンク先となる要素に付けられたid”属性の値の先頭に“#”をつけて“href”属性の値に指定することでアンカー・リンクとすることができます。リンク先がリンク元と同じウェブページ内にある場合は“#”に続く要素のID名、リンク先がリンク元と別のウェブページ内にある場合はリンク先があるウェブページのURLの後に“#”に続く要素のID名を記述します

リンク先がリンク元と同じウェブページ内にある
<a href="#item">リンク</a>

リンク先がリンク元と別のウェブページ内にある
<a href="sample.html#item">リンク</a>

また、ブラウザがサポートする“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
はてなブックマーク