href属性について
Webページを閲覧する際、テキストや画像をクリックすると、別のページやファイルに移動することがよくあります。この移動を可能にするのが、HTMLのa要素（アンカー要素）と、その属性であるhrefです。
hrefとは？
hrefは "Hypertext Reference" の略で、ハイパーテキスト参照を意味します。a要素で使用され、リンク先のURLを指定する役割を担います。つまり、href属性は、ブラウザに対して「このリンクをクリックすると、どのリソース（Webページ、画像、ファイルなど）を表示するか」を指示する役割を果たします。
href属性の使い方
href属性は、a要素の開始タグ内に記述します。基本的な構文は以下の通りです。
<a href="リンク先URL">リンクテキスト</a>
例えば、"https://www.example.com/" にリンクを貼り、リンクテキストを "Example website" とする場合は、以下のように記述します。
<a href="https://www.example.com/">Example website</a>href属性の値の種類
href属性には、様々な種類のURLを指定することができます。主な例は以下の通りです。
| 種類 | 説明 | 例 |
|---|---|---|
| 絶対URL | Web上のリソースを特定するための完全なURL | https://www.example.com/index.html |
| 相対URL | 現在のHTMLファイルからの相対パスでリソースを指定するURL | /images/logo.png, ../about.html |
| フラグメント識別子 | 同一ページ内の特定の要素へのリンクを作成する際に使用 | #section1 |
| メールアドレス | クリックするとメールソフトが開き、指定したアドレス宛てのメール作成画面が表示される | mailto:[email protected] |
| 電話番号 | クリックすると電話アプリが開き、指定した電話番号への発信準備がされる | tel:+811234567890 |
まとめ
href属性は、Webページにハイパーリンクを実装するために不可欠な要素です。適切なURLを指定することで、ユーザーを目的のページやファイルへスムーズに誘導することができます。
よくある質問
Q1: href属性はa要素以外でも使えますか？
A1: いいえ、href属性はa要素（アンカー要素）専用です。他の要素でリンクを表現したい場合は、JavaScriptなどを利用する必要があります。
Q2: 相対URLと絶対URLの使い分け方を教えてください。
A2: 基本的に、外部サイトへのリンクには絶対URLを、同一サイト内のページやファイルへのリンクには相対URLを使用します。相対URLは、サイト構造が変わってもリンク切れが発生しにくいというメリットがあります。
Q3: href属性にJavaScriptを含めることはできますか？
A3: セキュリティ上の理由から、href属性に直接JavaScriptを記述することは避けるべきです。JavaScriptを実行したい場合は、onclick属性などを利用するか、より安全な方法を検討してください。