HTMLの画像とメディア — img・alt・figure・video - HTML入門 — Webページの構造とタグのチートシート

画像はページを分かりやすくしますが、HTMLでは「画像が表示できない人や環境にも意味が伝わるか」を考える必要があります。その中心が alt 属性です。

<img src="/images/profile.jpg" alt="プロフィール写真" width="320" height="240">

html

画像・メディア要素のチートシート

タグ	用途	よく使う属性	注意点
`img`	画像表示	`src`, `alt`, `width`, `height`, `loading`	意味のある画像には適切な `alt`
`figure`	図版・写真・コード例などのまとまり	なし	本文から参照される図に向く
`figcaption`	図版のキャプション	なし	`figure` 内で使う
`picture`	画面幅や形式に応じた画像切替	`source` と組み合わせる	レスポンシブ画像で使う
`video`	動画	`src`, `controls`, `poster`	`controls` がないと操作しづらい
`audio`	音声	`src`, `controls`	自動再生は避ける

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

戻り値： HTML要素なので戻り値はありません。ブラウザが画像リソースを取得して表示します。

alt は画像の説明文ではなく、画像が伝えている情報の代替です。

装飾画像は alt=""、意味のある画像は情報が伝わる alt にします。

学習者

すべての画像に詳しい説明を入れれば安心ですか？

先生

装飾画像まで読み上げられると逆に邪魔になります。画像が情報を持つかどうかで判断します。

本文中の図や写真にキャプションを付ける場合は、figure と figcaption を使います。

<figure>
  <img src="/images/layout.png" alt="ヘッダー、メイン、フッターに分かれたページ構造">
  <figcaption>図1: 基本的なページ構造</figcaption>
</figure>

html

次章では、箇条書き、番号付きリスト、表を使って情報を整理する方法を学びます。