HTMLのsrc属性とは？書き方や使われているタグを紹介！
普段のコーディングやHTMLのソースコードで、主に画像の読み込みなどでよく使われているsrc属性について今回はご紹介します。src属性の正しい指定の方法や利用できるHTMLタグについても、この機会に併せて確認してみましょう！
HTMLのsrc属性とは？
普段のコーディングやHTMLのソースコードで、主に画像の読み込みなどでよく使われているsrc属性についてご紹介します。
src属性の意味や必要な理由とは？
まずは、一般的によく見るsrc属性を使ったimg要素のサンプルコードを見てみましょう！
HTML HTMLのsrc属性とは？書き方や使われているタグを紹介！
<img src="image.jpg" alt="写真">HTMLコーディングをしたことがある人は必ずどこかで見たり使ったことがありますよね！
src属性とは、WEBサイトのページ内で表示する画像（img）やスクリプト（script）、フレーム（iframe）内などの読込元を指定するための属性です。
srcとは、「sourse」を略したもので「情報元」を意味しています。
src属性とhref属性の違いは？
src属性について、だいたいの意味は分かりましたよね！
では、ここでsrc属性と少し似たような使い方をするhref属性との違いを解説します。
下のサンプルコードを見てください。
HTML HTMLのsrc属性とは？書き方や使われているタグを紹介！
<!-- サンプル1 src属性 -->
<iframe src="content.html"></iframe>
<!-- サンプル2 src属性 -->
<script src="script.js"></script>
<!-- サンプル3 href属性 -->
<link rel="stylesheet" href="style.css">
<!-- サンプル4 href属性 -->
<a href="/contact.html">お問い合わせはこちらから</a>src属性は、WEBサイトのページに埋め込むファイルの情報元を指定します。
イメージとしては、サンプル1とサンプル2は、このページに読込元のファイルを埋め込んでいるイメージです。
それに対して、href属性は各要素に関連する情報の参照先を指定するイメージです。サンプル3のようなlink要素であれば参照するスタイルシートのURLを指定しています。サンプル4のようなa要素であればリンク先の参照するURLを指定しています。
・・・少し難しいですね。
この違いと関係性は余談くらいに考えて、このタグならsrc属性で、こっちならhref属性という感じでラフに覚えた方が簡単そうですね。
間違って記述してしまうと正しく表示されないので、そこだけは必ず注意しましょう。
逆にいえば、読み込まれないときは指定する属性が間違っている可能性があるかも知れないですね。
src属性の書き方
src属性値には、絶対パスや相対パスでURLの指定ができます。
指定方法とサンプルコードを確認していきましょう！
相対パスと絶対パスでの指定方法
HTML HTMLのsrc属性とは？書き方や使われているタグを紹介！
<!-- 相対パスのサンプル -->
<img src="/images/image.jpg" alt="写真">
<!-- 絶対パスのサンプル -->
<img src="https://qumeru.com/images/image.jpg" alt="写真">相対パスとは、現在のファイルの階層を基準にして、読込み元のファイルがどこにあるのかを伝えます。
絶対パスとは、URLでページを指定して、読込み元のファイルがどこにあるのかをダイレクトに伝えます。
サンプルコードはドメインが同じであった場合にどちらも同じimage.jpgという画像を指定していることになります。
相対パスでの色々な指定方法
HTML HTMLのsrc属性とは？書き方や使われているタグを紹介！
<!-- サンプル1 もし現在のURLが「https://qumeru.com/」だったら -->
<img src="/images/image.jpg" alt="写真">
<!-- サンプル2 もし現在のURLが「https://qumeru.com/」だったら -->
<img src="images/image.jpg" alt="写真">
<img src="./images/image.jpg" alt="写真">
<!-- サンプル3 もし現在のURLが「https://qumeru.com/contact/」だったら -->
<img src="../images/image.jpg" alt="写真">上記のサンプルコードも同様に、「image.jpg」という画像を指定しています。
サンプル1について
サンプル1とサンプル2は、現在のURLが「https://qumeru.com/」だった場合を仮定していますが、見比べてみるとURLの始めの部分に違いがあります。
サンプル1の「/（スラッシュ）」から始まる場合は、ドメインを省略した階層からを基準に指定することができます。
サンプル2について
サンプル2の最初からディレクトリ階層を指定する場合と「./（ドット スラッシュ）」と指定する場合は、現在の階層からを基準にしています。
2つパターンがありますが、この2つの方法は同じ意味です。
サンプル3について
サンプル3は、現在のURLが「https://qumeru.com/contact/」だった場合です。
この場合、1つ前の階層に戻りたいわけなので、そういうときは「../（ドットドット スラッシュ）」とすることで1つ前の階層に戻ることを意味します。
どれもターミナルやコマンドを使ったことのある人ならイメージしやすいですよね！
src属性が使われているタグ
src属性を利用するHTML要素は下記の表から確認することができます。
| タグ | 使い方 |
| audio | メディアファイルを埋め込む |
| embed | プラグインが必要なデータを埋め込む |
| iframe | フレームを埋め込む(HTMLを埋め込む) |
| img | 画像を埋め込む |
| input | 入力欄を埋め込む |
| script | javascriptを埋め込む |
| source | メディアファイルのURLを指定 |
| video | 動画ファイルを埋め込む |
まとめ
いかがでしたでしょうか？
今回は、普段のコーディングやHTMLのソースコードでよく利用するsrc属性についてのご紹介でした。
ぜひ今回の記事を機会にsrc属性について理解を深めてもらえると嬉しいです。
HTMLの文章構造をきちんと理解してSEOに強いコーディングを目指してくださいね。
