Webページに画像を表示するには、<img>タグを使います。
この記事では、画像を表示するための基本的な書き方と、よく使う属性についてやさしく解説します。

<img>タグの基本構文

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

<img>は「終了タグ（</img>）」を持たない単独タグです。

主な属性の意味

画像を表示してみよう

<img src="images/sample.jpg" alt="サンプル画像" width="300" height="200">

このように書くことで、300px × 200px の画像が表示されます。

画像サイズをCSSで調整する例

HTMLではなくCSS側でサイズを指定することもできます。

<img src="images/sample.jpg" alt="スタイル付き画像" class="responsive-img">

.responsive-img {
  width: 100%;
  height: auto;
}

alt属性はSEOやアクセシビリティにも重要

画像の内容を説明するalt属性は、視覚障害者のためのスクリーンリーダーや、画像が読み込めない環境での代替情報になります。
また、Googleなどの検索エンジンもaltを参考に画像の内容を理解するため、SEO対策としても重要です。

おわりに

<img>タグは、Webページに画像を表示するための基本中の基本です。
正しい属性の使い方を覚えて、見栄えもアクセシビリティも考慮したページ作りをしていきましょう。

次回は「画像のレスポンシブ対応」や「WebP形式の活用」など、さらに実用的な画像テクニックをご紹介します！