“a”要素~“href”属性

“href”属性について

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

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

指定できる値

リンク先となる要素に付けられた“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>


ページの先頭へ