画像タグimgとalt属性の正しい書き方【初心者向け】

Webページに画像を表示するために使うのが「<img>タグ」です。
HTMLではテキストだけでなく画像も重要な情報として扱われますが、
正しいタグの書き方を理解していないと、画像が表示されなかったりSEO評価が下がったりすることもあります。

この記事では、初心者の方にも分かりやすく、
imgタグの基本構文とalt属性の正しい使い方を解説します。

imgタグとは？

<img>タグは、画像をページ内に表示するためのHTMLタグです。
HTMLの中でも頻繁に使われる要素のひとつです。

基本の書き方はこちらです：

<img src="画像のURL" alt="画像の説明文">

属性	説明
`src`	表示したい画像ファイルのパス（URL）を指定
`alt`	画像が表示できない時に代わりに表示されるテキスト（代替テキスト）

<img src="images/sample.jpg" alt="HTML講座のイメージ画像">

ブラウザでは次のように表示されます：

🖼️（sample.jpg の画像）

画像が表示されないときは、代わりに alt の内容が表示されます。

alt属性とは 「代替テキスト（Alternative Text）」 のことです。
視覚的に画像が見えない人や、画像読み上げソフト（スクリーンリーダー）を利用する人のために、
画像の内容をテキストで伝える役割を持ちます。

また、Googleなどの検索エンジンもalt属性を参考にして画像の内容を理解するため、
SEO（画像検索・構造化評価）にも重要な要素です。

<img src="dog.jpg" alt="柴犬が芝生を走っている写真">

→ 読者や検索エンジンにとって分かりやすい内容です。
「画像に何が写っているか」「何を伝えたいか」を簡潔に書きましょう。

デザイン目的で入れる画像（例：区切り線や背景アイコン）には、
空のalt属性を設定します。

<img src="line.png" alt="">

→ 空のaltを指定することで、スクリーンリーダーがその画像を読み上げず、
ユーザーに不要な情報を伝えないようにできます。

⚠ alt属性を省略するのはNGです。必ず空でも記述しましょう。

SEO目的で次のようにaltにキーワードを連続で入れるのは避けましょう。

❌ NG例：

<img src="html-course.jpg" alt="HTML 講座 HTML タグ HTML 学習 初心者向け HTML 講座">

✅ OK例：

<img src="html-course.jpg" alt="HTML講座を説明するイメージ画像">

自然な日本語で、画像の意味を簡潔に説明するのが最適です。

HTML5では、width と height 属性も記述しておくことが推奨されています。
これによりブラウザが画像の読み込みスペースを確保し、
ページのレイアウト崩れ（CLS）を防ぐことができます。

<img src="photo.jpg" alt="カフェで撮影したラテアート" width="600" height="400">

→ WordPressで画像を挿入する際も、自動的にこれらの属性が付与されます。

ファイル名は英数字・ハイフン区切り（例：html-course-banner.jpg）にすると安全です。

HTMLでは、CSSを使って画像のサイズや配置を自由に調整できます。

<img src="images/laptop.jpg" alt="ノートパソコンの写真" class="hero-image">

.hero-image {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

→ このようにCSSを使うと、レスポンシブ対応（スマホ対応）もしやすくなります。

<img src="images/html-course.jpg"
     alt="HTML講座で学ぶ基礎タグのイメージ"
     width="600"
     height="400"
     loading="lazy">