src
初級読み方：ソース｜英語：Src
img タグや script タグでファイルのパスを指定する属性だよ。Sourceの略。
やさしい説明
src（ソース）属性とは、画像やスクリプトなど外部ファイルの場所を指定する属性です。「source（ソース＝元）」の略です。
「この画像ファイルを表示してね」「このJSファイルを読み込んでね」とブラウザに伝える役割です。
srcに書くのはファイルの「パス（住所）」です。同じフォルダ内のファイルなら名前だけ、別の場所ならフルパスやURLを書きます。
具体例・使い方
<!-- 画像を表示 -->
<img src="images/cat.jpg" alt="猫の写真">
<!-- JavaScriptファイルを読み込み -->
<script src="main.js"></script>
<!-- 外部サイトの画像 -->
<img src="https://example.com/logo.png" alt="ロゴ">src を使う主なタグ
| タグ | srcで指定するもの |
|---|---|
<img> | 表示する画像ファイル |
<script> | 読み込むJavaScriptファイル |
<video> / <audio> | 動画・音声ファイル |
<iframe> | 埋め込む別ページ（YouTube・地図など） |
リンク先を指定する href（<a> や <link>）と混同しがち。src＝「読み込んで埋め込む」、href＝「リンク先を指す」と覚えると区別できます。
パスの書き方早見表
srcに書く「パス」の書き方は5パターンあります。HTMLファイルから見た場所で使い分けます。
| 書き方 | ファイルがある場所 |
|---|---|
cat.jpg | HTMLと同じフォルダ |
images/cat.jpg | 1つ下の images フォルダの中 |
../cat.jpg | 1つ上のフォルダ |
/images/cat.jpg | サイトの一番上（ルート）から数えた場所 |
https://example.com/cat.jpg | 外部サイト上のファイル |
画像が表示されないときは、この表とフォルダ構成を見比べるとほぼ解決します。くわしくはパスの解説へ。
いつ使う？
- ページに画像を表示するとき（
<img>） - JavaScriptファイルを読み込むとき（
<script>） - 動画・音声を埋め込むとき
- YouTubeや地図を埋め込むとき（
<iframe>）
間違いやすいポイント
❌ パスの間違いで画像が表示されない
フォルダ名のスペルミスが最頻出。大文字小文字も区別されます（Images と images は別物）。
<!-- ❌ フォルダ名が間違っている -->
<img src="image/cat.jpg">
<!-- ✅ 正しいフォルダ名 -->
<img src="images/cat.jpg">❌ <img> に alt を付け忘れる
srcとセットで alt（画像の説明文）も書きましょう。画像が読めない人や読み込み失敗時に役立ち、SEOにも効きます。
よくある疑問
Q: srcのパスが間違っているとどうなる？
A: 画像なら×マークが表示され、スクリプトなら404エラーがコンソールに出ます。開発者ツールのNetworkタブで確認できます。
Q: srcに外部URLを書いていい？
A: はい。<img src="https://example.com/photo.jpg">のように外部サイトの画像も表示できます。ただし相手サイトが画像を削除すると表示されなくなります。
Q: srcとhrefの違いは？
A: srcはリソースを「埋め込む」（画像やスクリプトをページに取り込む）、hrefはリソースに「リンクする」（クリックで移動する）という違いがあります。
関連用語
📖 関連レッスン
レッスンを見る →