href属性とは？
href属性は、HTMLのアンカータグ(<a>)や、リンクタグ(<link>)などで使用される属性です。この属性は、リンクの**行き先**や、相対URIの**基準となるURI**を指定するために使用します。
href属性の役割
href属性の役割は、大きく分けて以下の2つです。
- アンカーのリンク先URLを指定する
- 相対URIの基準となるURIを指定する
1. アンカーのリンク先URLを指定する
<a>タグで使用される場合、href属性はリンクをクリックした際に、ブラウザがどのURLに遷移するかを指定します。例えば、以下のHTMLコードでは、"Google"というテキストをクリックすると、Googleのホームページ(https://www.google.com/)に遷移します。
<a href="https://www.google.com/">Google</a>
2. 相対URIの基準となるURIを指定する
href属性は、相対URIを使用する場合の**基準となるURI**を指定するためにも使用します。相対URIとは、現在のHTMLファイルの場所からの相対的な位置関係でURLを指定する方法です。例えば、以下のHTMLコードでは、"style.css"というファイルが、現在のHTMLファイルと同じディレクトリに存在することを前提に、スタイルシートを読み込んでいます。
<link rel="stylesheet" href="style.css">
この場合、href属性に指定された"style.css"は相対URIであり、現在のHTMLファイルの場所が基準となります。もし、現在のHTMLファイルが"https://example.com/index.html"であった場合、ブラウザは"https://example.com/style.css"からスタイルシートを読み込もうとします。
href属性の値
href属性には、**絶対URI**または**相対URI**を指定することができます。
| 種類 | 説明 | 例 |
|---|---|---|
| 絶対URI | 完全なURLを指定します。 | https://www.google.com/ |
| 相対URI | 現在のHTMLファイルの場所からの相対的な位置関係でURLを指定します。 | style.css |
まとめ
href属性は、HTMLのリンクを表現する上で非常に重要な役割を担っています。リンク先を指定したり、相対URIの基準URIを指定することで、Webページ間をスムーズに移動できるようにする役割を担っています。
参考文献
- <a>: アンカー要素 - HTML: HyperText Markup Language | MDN (https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)
- <link>: 接続要素 - HTML: HyperText Markup Language | MDN (https://developer.mozilla.org/ja/docs/Web/HTML/Element/link)
よくある質問
Q1: href属性に#だけを指定するとどうなるのですか？
A1: #だけを指定すると、現在のページ内の先頭へ移動します。ページ内に特定の場所へ移動するアンカーを設定する場合などに使用されます。
Q2: href属性にJavaScriptを実行させることはできますか？
A2: はい、href属性に"javascript:"というスキームを指定することでJavaScriptを実行することができます。しかし、セキュリティ上の観点から、可能な限り使用は避けるべきです。
Q3: target属性と併用して使用することはできますか？
A3: はい、target属性と併用することで、リンクを開く場所を指定することができます。例えば、target="_blank"と指定すると、新しいタブまたはウィンドウでリンクを開くことができます。
その他の参考記事:jquery href 取得