<img>タグについて

<img>とは？

<img>タグは、HTMLで画像を表示するためのタグです。
指定した画像ファイルをWebページ上に埋め込むことができます。

基本構文

<img src="画像のURL" alt="代替テキスト">

<img>タグは「空要素（self-closing tag）」であり、終了タグ（</img>）は不要です。

主な属性

• src：画像ファイルのパス（必須）
• alt：画像が表示できないときに代わりに表示するテキスト（必須）
• width：画像の横幅（単位はpxまたは%）
• height：画像の高さ（単位はpxまたは%）
• title：マウスを重ねたときに表示される説明文

使用例

<img src="photo.jpg" alt="風景写真" width="300" height="200">
  

画像にリンクを設定する例

<a href="https://example.com">
  <img src="banner.png" alt="バナー画像">
</a>
  

画像の代替テキスト（alt属性）の重要性

alt属性は、画像が読み込めなかったときの表示や、視覚障がい者向けのスクリーンリーダーの読み上げに使われるため、SEOやアクセシビリティの観点からも非常に重要です。

外部画像の読み込み例

<img src="https://example.com/logo.png" alt="ロゴ">
  

注意点

• src属性が正しく設定されていないと画像が表示されない
• alt属性を必ず記述する（空でもOK：alt=""）
• 画像の大きさはCSSで調整する方法もある
• 著作権のある画像は使用前に確認する

まとめ

• <img>タグはHTMLで画像を表示するためのタグ
• srcで画像の場所、altで代替テキストを指定
• 終了タグは不要な空要素
• アクセシビリティやSEOにも影響する重要なタグ