img - 画像

src属性は必須です。
また、指定するURLは、画像であればアニメーションでも問題ありませんが、HTMLやスクリプトなどは指定できません。またsrc属性に、空の文字列を指定することもできません。
img要素はレイアウトを整えるために透明画像を使用するなどは控えるべきです。なぜなら、その画像が意味を持つわけでもなくドキュメントに対してなんら役に立つわけでもありませんから。

img要素が何を表すかは、srcと alt属性に依存します。

『src属性=値がセット、alt属性=空文字列』 の場合
その画像は、コンテンツの対して装飾的もしくは補足的なものとなり、ドキュメントにある別の情報と重複したものとなります。
もし、src属性の値が有効であれば
 → 画像を表示します。
もし、そのsrc属性の値が無効であれば
 → 何も表しません。

『src属性=値がセット、alt属性=空文字列以外の値』の場合
その画像は、コンテンツの重要な部分であることを示します。そして、alt属性がそのイメージに相当する、または置き換えとなるテキストを提供します。
もし、src属性の値が有効であれば
 → 画像を表示します。
もし、そのsrc属性の値が無効であれば
 → alt属性によって与えられるテキストを表示

『src属性=値がセット、alt属性=無指定』 の場合
その画像は、はコンテンツの重要な部分となります。そして、そのイメージに相当するテキストはありません。
準拠ドキュメントでは、alt 属性の不在は、そのイメージがコンテンツの重要な部分であるけれども、そのイメージが生成されなかったとき、そのイメージの代替えテキストは利用可能ではないことを示します。
もし、src属性の値が有効であれば
 → 画像を表示します。
もし、 そのsrc属性の値が無効であれば
 → そのイメージに対するキャプション情報を提供:
  title属性を持つなら、
  → title属性の値がキャプション情報となります。
  legend要素を子に持つ figure要素の子なら
  → legend要素のコンテンツが、キャプション情報となります
  src属性がセットされず、そして、alt属性が空文字にセットまたはない場合
  → この要素は何も表しません。
  上にあげたいずれでもない
  → alt属性で指定されたテキストを表します。

もし、img要素がイメージ表示以外の目的の場合
例えば、ページビュー計測サービスの一部として使われているなら、alt属性は空文字列でなければいけません。
この場合、widthとheight属性にはともに0 をセットするべきです。

もし、イメージを見ることができると分かっている特定の人向けページ、e-mailの場合
altは省略することが可能です。(それでも指定いすることが推奨ですが)

代替えテキストを書く最も全般的な規則は:
『すべてのイメージを、その alt属性のテキストで置き換えても、ページの意味が変わらないようにすること』です。

img要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
img

img要素のHTML4からHTML5への変更点

HTML4.01で定義されていたalign属性、border属性などは廃止されました。
またalt属性が必須ではなくなりました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
alt 外部リソースが読み込めない時の代替えテキスト
src 埋め込まれる画像のURL(必須)
usemap イメージマップを利用する場合の対象イメージマップ名
ismap サーバーサイドのイメージマップを指定
width 画像の幅を指定
height 画像の高さを指定

「基本」のサンプル

HTMLコード

<img src="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg" alt="基本例" width="250" height="141">

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

「title属性がある例」のサンプル

HTMLコード

<img src="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg" title="title属性で指定した値" width="250" height="141">

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「title属性がある例」のサンプルプレビューを確認

「figureの子要素のlegend要素がある例」のサンプル

HTMLコード

<figure>
		<legend>figureの子要素のlegend要素の値</legend>
		<img src="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg" width="250" height="141">
		</figure>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「figureの子要素のlegend要素がある例」のサンプルプレビューを確認

「イメージマップ」のサンプル

HTMLコード

<img src="http://nekodama.sakura.ne.jp/images/webdev/html/example_map.jpg" usemap="#sample" alt="サンプル" width="300" height="200">
<map name="sample">
<area href="http://webdev-nekodama.xii.jp/html/" shape="rect" alt="四角形" coords="30,20,80,70">
<area href="http://webdev-nekodama.xii.jp/jqueryTools/" shape="circle" alt="円形" coords="200,80,65">
<area href="http://webdev-nekodama.xii.jp/css/" shape="poly" alt="多角形" coords="83,95,137,134,84,195,21,186,25,149">
</map> 

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「イメージマップ」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2009/WD-html5-20090825/text-level-semantics.html#the-img-element)