HTML Living Standard/href属性
href属性は、HTML要素にリンク先のURLを指定するために使用されます。この属性は主にリンクのナビゲーションやリソースの参照を指定する際に使用されます。本章では、HTML要素における href属性の使用法を詳しく解説します。
概要
[編集]href属性は、ハイパーテキスト参照を意味する "Hypertext REFerence" に由来します。この属性はリンクやリソースの場所を示すために使用され、多くの場合、以下の目的で利用されます。
- 他のウェブページやファイルへのリンクを作成する。
- スタイルシートやスクリプトファイルを読み込む。
- アンカーポイントへのナビゲーションを設定する。
属性の構文
[編集]href属性の値には、絶対URLまたは相対URLを指定できます。
- 例
<a href="https://example.com">Example</a>
- https://example.com: 絶対URLを指定しています。このリンクをクリックすると、指定された外部ページが開きます。
<a href="/about">About Us</a>
- /about: 相対URLを指定しています。このリンクは現在のウェブサイト内の `/about` ページに遷移します。
主な使用方法
[編集]href属性は以下の要素とともに使用されます。
他のウェブページやリソースへのリンクを作成する際に使用します。
<a href="https://example.com">Visit Example</a>
この例では、リンクをクリックすると `https://example.com` に移動します。
外部リソースを文書に関連付けるために使用します。
<link href="styles.css" rel="stylesheet">
この例では、`styles.css` ファイルをスタイルシートとして文書に読み込んでいます。
文書内の相対URLの基準を設定します。
<base href="https://example.com/"> <a href="about">About Us</a>
この例では、すべての相対URLが `https://example.com/` を基準に解釈されます。
画像マップ内のリンクを指定します。
<img src="map.png" usemap="#map"> <map name="map"> <area shape="rect" coords="0,0,100,100" href="https://example.com/section1"> </map>
この例では、画像内の特定の領域をクリックすると、リンク先のURLに移動します。
使用例
[編集]以下に、href属性を使用した実際の例を示します。
外部リンク
[編集]<a href="https://developer.mozilla.org/">MDN Web Docs</a>
このリンクをクリックすると、MDN Web Docs のウェブサイトに移動します。
ページ内リンク
[編集]<a href="#section2">セクション2に移動</a> <h2 id="section2">セクション2</h2>
この例では、ページ内の特定のセクションに移動します。
ファイルダウンロードリンク
[編集]<a href="/files/document.pdf" download>PDFをダウンロード</a>
このリンクをクリックすると、`document.pdf` がダウンロードされます。
注意事項
[編集]href属性に指定するURLは有効である必要があります。不正なURLを指定すると、リンクが正しく機能しません。- セキュリティ上の理由から、外部リンクには `rel="noopener noreferrer"` を指定することが推奨されます。
例:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイト</a>
<base>タグを使用する場合、意図しないURL解釈を防ぐため、設定内容に注意が必要です。- ダウンロードリンクを作成する場合、ファイルのパスや名前が適切であることを確認してください。
まとめ
[編集]href属性は、ウェブページやリソースを参照するための基本的かつ重要な属性です。正しく使用することで、ユーザーにとってわかりやすいナビゲーションを提供し、ページの機能性を高めることができます。