💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
HTML imgタグで画像を表示する方法｜srcとaltの書き方
📌
結論
<img src="URL" alt="説明">
<img>📝 実際のコードはこちら
<img src="https://placehold.co/200x100" alt="サンプル画像">imgタグの特徴
<img>| 特徴 | 説明 |
|---|---|
| 自己閉じタグ | |
| 2つの必須属性 | src（画像のURL）と alt（代替テキスト） |
src属性とalt属性
src は画像ファイルの場所を指定します。alt は画像が表示できないときの代わりのテキストです。
alt はなくても画像は表示されるのですが、以下の理由から必ず書いてください。
・目が不自由な方が使うスクリーンリーダーが alt を読み上げる
・画像が読み込めないとき alt のテキストが表示される
・Googleの画像検索にも影響する（SEO）
まとめ
・画像は<img src="URL" alt="説明"></img>alt はアクセシビリティとSEOのために必須
演習で試してみよう
<img>🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
https://placehold.co/200x100 の画像を表示してください。altはサンプル画像にします。
詰まったらヒント
imgタグを使います。srcとaltが必須です。