SYNCERのロゴ
アイキャッチ画像

href属性 - ハイパーリンクのURL

a要素area要素のhref属性はURLを指定するための属性です。ここで指定したURLが、リンクのジャンプ先やダウンロードの対象になります。

概要

要素
a要素
DOM Interface
HTMLHyperlinkElementUtils.href
仕様書
https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

URLを表す文字列。この属性はa要素area要素の必須属性ではない。

<a href="https://syncer.jp/">SYNCER</a>

説明

href属性の基本的な値の指定方法を紹介します。

絶対パス

完全なURLで指定します。リンク先のスキーマ、ドメイン、パス、どれに変更があっても無効になってしまうのが難点と言えば難点です。

<a href="https://syncer.jp/">リンク</a>

相対パス

現在位置からの相対的な位置を指定します。値の文字数が少なくて済むこと、スキーマやドメインに変更があっても影響ないことが利点です。リンク元、またはリンク先の階層位置が変わった時に無効になってしまいます。

<a href="./page.html">リンク</a>

サーバー相対パス

そのドメインの最上位ディレクトリからの相対的な位置を指定します。スキーマやドメイン、階層位置が変わっても無効になりません。同じドメイン内のリンクなら、この形式を推奨します。

<!-- https://syncer.jp/directory/page.html -->
<a href="/directory/page.html">リンク</a>

同じスキーマで接続

スキーマを省略すると、現在と同じスキーマで接続を試みます。httpだったらhttp、httpsだったらhttpsで繋がります。

<a href="//syncer.jp/">リンク</a>

フラグメント

いわゆるページ内リンクです。シャープ(#)の後にid名を指定すると、そのid属性を持つ要素の位置まで移動します。

<a href="#hoge">3章へ移動</a>

<h1 id="hoge">3章</h1>

メールアドレス

クリックするとメーラーが起動するリンクです。mailto:に続けて宛先のメールアドレスを指定して下さい。

<a href="mailto:info@syncer.jp">メールをする</a>
<!-- このコードは編集できます。 -->

<p>リンクをクリックすると、メーラーが起動します。</p>

<a href="mailto:info@syncer.jp">メールで問い合わせ</a>

電話番号

モバイルのブラウザでクリックすると電話をかけるリンクです。tel:に続けて電話番号を指定して下さい。

<a href="tel:010-1234-5678">電話をかける</a>
<!-- このコードは編集できます。 -->

<p>下記はデモ用の、無効な電話番号です。</p>
<p>
	<a href="tel:010-12345-56789">電話をかける</a>
</p>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月14日 (木)
コンテンツを公開しました。