目次に戻る

img要素:HTML5.2各要素別メモ

概要

カテゴリー
配置できる場所
  • 上記カテゴリーの要素が置ける場所。
内容モデル(許される子要素)
属性
  • グローバル属性
  • alt→画像が表示されない場合の代替テキストほぼ必須
    • 例外的にやむをえず省略が許される場合。
    • 属性値を空とすべき場合。
      • アイコン画像で、同等の意味をもつテキストが直前・直後にある場合。その他、類似の場合も同様。
      • 画像が前後のテキストの補足でしかなく、代替テキストを入れたら同じことを二度繰り返すことにしかならない場合。
      • 意味をもたない装飾的な画像。*純粋に装飾的な画像ならば、スタイルシートで背景画像として設定する方が望ましい。
      • 複数のimg要素をもって1個の画像を構成している場合→1個のimg要素のalt属性値に画像全体の代替テキストを入れて、残りのimg要素のalt属性値は空とする。
      • スクリプトの読み込み目的など、ユーザーに見せることが目的でないimg要素の場合(アクセス履歴のトラッキングコードをimg要素のsrc属性で読み込んでる場合など)。なお、この場合は、width属性値及びheight属性値を0にすることが推奨される。
    • *属性値を空にするとユーザーに画像の存在するという事実を全く示さないユーザーエージェントもあるので、ユーザーに画像の存在を認識してもらわないと困る場合は、属性値を空にしてはいけない。ユーザーに画像の存在を認識してもらいたいがどうしても属性値を設定できない場合は、上記の「例外的にやむをえず省略が許される場合」の条件を満たした上で、alt属性を省略する。
  • src→画像リソースを示すURL必須
  • srcset→画像のURLと「非負整数+w」(例:200w)又は「非負浮動小数点数+x」(例:1.5x)とを半角スペース区切りでセットとして指定(後者は必須ではない。ただし、sizes属性がある場合は、「非負整数+w」が必須)。カンマ区切りで複数セットの指定可能。レスポンシブイメージのための設定。
  • sizes→妥当なメディアクエリCSSlengthとして許容される値とを半角スペース区切りでセットとして指定(前者は必須ではない)。カンマ区切りで複数セットの指定可能。srcset属性が指定されている場合にのみ指定可能
  • crossoriginanonymoususe-credentials。空も可。空の場合は、anonymousと同等。デフォルトは、anonymous。別オリジン(→別ドメインなど)からの読み込みに対して、anonymousはユーザー認証情報を求めず、use-credentialsは求める。
  • usemap→イメージマップを指定するmap要素name属性値の頭に「#」をつけた値。
  • ismapboolean属性サーバーサイドイメージマップを指定するa要素の子孫要素でないimg要素では指定してはならない。
  • widthpx単位の幅を指定する非負整数。単位はつけない。
  • heightpx単位の高さを指定する非負整数。単位はつけない。
  • longdesc→画像の内容を説明する文書を指定する妥当なURL。詳細はHTML5 Image Description Extension (longdesc)による。
  • referrerpolicy→値は下記のとおり。アクセス又はリソース読み込みのときのリファラーヘッダに関するポリシーを指定する。詳細は、Referrer Policyを参照。
    • no-referrer→リファラーヘッダを削除し、リファラー情報を送信しない。
    • no-referrer-when-downgradeTLSで保護されたクライアントから信用に価し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、リファラー情報を全部送信する。
    • same-origin→非同一オリジンからの要請に対しては、リファラーヘッダを削除し、リファラー情報を送信しない。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • origin→ドメイン部分のみをリファラー情報として送信する(例:「https://example.com/example.html」からのアクセス→「https://example.com/」のみを送信)。
    • strict-originTLSで保護されたクライアントから信用に価し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、ドメイン部分のみをリファラー情報として送信する。
    • origin-when-cross-origin→非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • strict-origin-when-cross-originTLSで保護されたクライアントから信用に価し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合で、非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。その他の場合で、同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • unsafe-url→リファラー用に削った全部情報を送信する。
HTML構文におけるタグの省略
  • Void elementなので、終了タグはなし。ただし、開始タグを<tag />で閉じてもよい。
WAI-ARIA
  • alt属性があってその属性値が空の場合は、
  • その他の場合は、
    • デフォルトroleは、img。デフォルトroleは、role属性値に指定すべきでない。
    • デフォルトrole以外では、presentation及びnoneを除くすべてのroleを指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • 指定された画像を表示。
  • height属性値及びwidth属性値をレンダリングのヒントとして用いる。
  • 指定された画像が無効な場合で、alt属性値が空でない場合は、指定された代替テキストを表示。なお、画像が見つからないことを示すアイコンを伴ってもよい。
  • 指定された画像が無効な場合で、alt属性値が空の場合は、空のinlineの要素として表示。
  • 指定された画像が無効な場合で、alt属性がない場合は、画像が見つからないことを示すアイコンを表示してもよい。
マークアップジェネレーターに対する規定
  • 代替テキストを取得できなかった場合は、「alt属性を省略し、かつ、generator-unable-to-provide-required-alt属性を設定する」ことができる。
  • ただし、generator-unable-to-provide-required-alt属性は非準拠である。
文法チェッカーに対する規定
  • img要素に廃止されたborder属性が指定されていても、その属性値が0である限りは、エラーとはせずに警告にとどめることが許容される。
  • alt属性を省略できる例外的な場合に該当する場合を除いて、alt属性の欠如をエラーと判定しなければならない。
  • ただし、「alt属性が欠如しており、かつ、generator-unable-to-provide-required-alt属性が存在する」場合の対応は下記のいずれかでなければならない。
    • alt属性の欠如をエラーとして指摘せず、かつ、generator-unable-to-provide-required-alt属性の存在をエラーとして指摘しない。
    • alt属性の欠如をエラーとして指摘し、かつ、generator-unable-to-provide-required-alt属性の存在をエラーとして指摘する。
HTML extension

Microdataによれば、itemprop属性がある場合は、src属性は必須。

意味・用法

画像を表す。

アクセシビリティ関連

私見・補足

純粋に装飾的な画像ならば、スタイルシートで背景画像として設定する方が望ましい。

表示確認

ソース1

  <img src="./sample/img.gif" alt="img" />
  
表示結果1
img
ソース2:画像ファイルが存在しない場合

  I <img src="./sample/nai.gif" alt="love" title="nai.gifは存在しません。" /> the world.
  
表示結果2
I love the world.
ソース3:srcset属性使用

  <img src="./sample/imgsrc.gif" alt="srcset属性サンプル" 
       sizes="80vw" 
       srcset="./sample/imgsrcset300.gif 300w,./sample/imgsrcset400.gif 400w,./sample/imgsrcset640.gif 640w,./sample/imgsrcset800.gif 800w,./sample/imgsrcset1024.gif 1024w" />
  
表示結果3
srcset属性サンプル

*画面幅で画像が変化する。

*未対応ブラウザにおいては、src属性で指定した画像が表示される。

IE6表示のスクリーンショット(表示結果3)
IE6表示:src属性で指定した画像が表示されている

IE7からIE11も同様。