srcとhrefの違いは何ですか？
Webページを作成する上で、画像や外部ファイルを読み込む際に「src」と「href」という属性をよく目にします。一見どちらも同じような役割を持っているように見えますが、実は明確な違いがあります。この記事では、「src」と「href」の違いを分かりやすく解説し、HTMLのコード例を交えながら理解を深めていきましょう。
1. srcとhrefの基本的な違い
「src」と「href」の最も基本的な違いは、リソースの埋め込みと参照先へのリンクの違いです。具体的には以下のようになります。
| 属性 | 意味 | 役割 |
|---|---|---|
src |
source（ソース） | HTML文書内にリソースを埋め込む |
href |
hypertext reference（ハイパーテキスト参照） | HTML文書から他のリソースへリンクする |
つまり、srcは画像やスクリプトなどをHTML文書の一部として埋め込み、hrefは別のページやファイルへのリンクを表現するために使用されます。
2. 具体的な使用例
2.1 src属性の使用例
src属性は、<img>タグ、<script>タグ、<iframe>タグなどで使用されます。以下に、具体的な例を挙げます。
<!-- 画像の埋め込み -->
<img src="images/sample.jpg" alt="サンプル画像">
<!-- JavaScriptファイルの読み込み -->
<script src="js/script.js"></script>
上記の例では、<img>タグで画像ファイル"sample.jpg"を、<script>タグでJavaScriptファイル"script.js"をそれぞれHTML文書内に埋め込んでいます。
2.2 href属性の使用例
href属性は、<a>タグ、<link>タグなどで使用されます。以下に、具体的な例を挙げます。
<!-- 別ページへのリンク -->
<a href="https://www.example.com/">example.com</a>
<!-- CSSファイルの読み込み -->
<link rel="stylesheet" href="css/style.css">
上記の例では、<a>タグで"example.com"へのリンクを、<link>タグでCSSファイル"style.css"を読み込んでいます。href属性は、リンク先のURLを指定するために使用されます。
3. まとめ
この記事では、「src」と「href」の違いについて解説しました。両者はHTML文書にリソースを埋め込むか、参照先へのリンクを設定するかという点で明確に異なります。それぞれの属性の役割を理解し、適切に使い分けるようにしましょう。
参考資料
よくある質問
Q1. src属性は画像ファイルにしか使えませんか？
A1. いいえ、画像ファイル以外にも、JavaScriptファイルやiframeなど、HTML文書内に埋め込みたいリソースに幅広く使用できます。
Q2. href属性で指定できるURLは、絶対URLだけですか？
A2. いいえ、絶対URL以外にも、相対URLを使用することもできます。相対URLは、現在のHTMLファイルからの相対的な位置を示すURLです。
Q3. srcとhrefの使い分け方がいまいち分かりません。
A3. 簡単に言うと、HTML文書に表示させたいリソース（画像、動画、iframeなど）には `src` を、 別ページやファイルへのリンクを作成したい場合は `href` を使用します。迷った場合は、それぞれの属性がどのような場面で使用されているか、具体的な例を参考にすると良いでしょう。
その他の参考記事:jquery href 取得