img要素

Updated / Published

img要素（image）は指定した部分にイメージ（画像）を埋め込みます。終了タグはなく内容をもたない空要素です。src属性は必須属性で画像ファイルの所在となる URI を指定します。さらに、何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境においても画像の表現する情報を取得できるように必ず alt属性で代替テキスト（altanative text）を記述する必要があります。

画像は文字による説明に加えてユーザの理解を促すために、またはグラフや地図などのように文章で表現するよりも画像として提供した方がわかりやすい、もしくは写真やイラストのように文章や言葉では表せないものの性質の場合に適しています。なお、ウェブページの見栄えを整えるためなどの装飾目的に使用することは、HTML の本義としては正しい使い方ではありません。なぜなら見栄えの調整のための画像では、それが何を表しているのかを適切な代替テキストの内容に置き換えることができない場合があるためです。環境に依存し、適切な代替方法を行うことができないこともあるため制作者はユーザの視点に立って、必要に応じて使用するようにしましょう。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素型
インライン要素
開始タグ
必須
終了タグ
なし
非推奨
-
内容モデル
-

align属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
img
必須
-
非推奨
  • 非推奨
  • HTML4.01 strict 廃止
  • XHTML1.0 strict 廃止
  • XHTML1.1 廃止
属性値
  • left
  • right
  • top
  • middle
  • bottom

画像とその後に続くテキストの揃え方を指定します。指定できる値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

left
画像は左に配置、その右にテキスト（複数行）が回り込む
right
画像は右に配置、その左にテキスト（複数行）が回り込む
top
画像の上辺に合わせてテキスト（1行）を上揃えに表示
middle
画像の垂直方向の長さの中央にテキスト（1行）を表示
bottom
画像の下辺に合わせてテキスト（1行）を下揃えに表示

align属性は非推奨属性のため、CSS の floatプロパティで左右の配置とその後に続くテキスト（複数行）の揃え方を、vertical-alignプロパティでテキスト（1行）との垂直方向の並びをそれぞれ代替することが推奨されています。また、回り込んだテキストを途中で解除したい場合は br要素に clear属性を指定すれば良いのですが、clear属性も非推奨属性のため、画像の後に続く要素に clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるようにしましょう。

alt属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
img
必須
必須属性
非推奨
-
属性値
代替テキスト（altanative text）

何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境において、その画像の表現する情報の代替となるテキストを記述します。alt属性は必須属性です。代替テキストは画像の内容を説明するのではなく、画像の表現する情報の代わりになるテキスト情報であって、画像の説明については title属性で提供するのが適切です。

border属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
img
必須
-
非推奨
  • 非推奨
  • HTML4.01 strict 廃止
  • XHTML1.0 strict 廃止
  • XHTML1.1 廃止
属性値
整数（pixels）

画像の周りに境界線を表示させます。UA によっては画像を内容にしたリンクが設定されている場合に枠線を表示するものがあります。その場合に border="0" を指定することで画像を内容にリンクを設定した場合でも枠を表示しないようにできます。ただし、border属性は非推奨属性のため枠の表示指定は、CSS の borderプロパティで代替指定することが推奨されています。

height属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
img
必須
-
非推奨
-
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

画像を表示するときの高さを指定します。実際のサイズよりも大きくして表示することも可能ですが、その画像ファイルがもつ画像解像度は変わらないため、値を大きく指定した分、画像は荒く表示されます。また、画像のサイズをあらかじめ指定しておくとことで、UA は画像の読み込みを待たずに指定された画像サイズ分の領域をあけておいて、先に他の要素を表示するので、ページの全体像を早く表示することができます。

hspace属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
img
必須
-
非推奨
  • 非推奨
  • HTML4.01 strict 廃止
  • XHTML1.0 strict 廃止
  • XHTML1.1 廃止
属性値
整数（pixels）

画像と周りの内容の間に水平（左右）方向の余白を設けます。値は整数（ピクセル数で解釈）で指定します。余白の指定は CSS の marginプロパティで代替することが推奨されています。

ismap属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
img
必須
-
非推奨
-
属性値
  • ismap
  • ismap="ismap"（XHTML）

CGIプログラムを利用したサーバサイド・イメージマップの場合に指定します。ユーザが a要素のリンクに設定された画像をクリックすると画像の中でクリックされた座標値（x座標, y座標）をウェブサーバを通してプログラムへと送ります。HTML4.01 では ismap、XHTML では属性値を省略できないため ismap="ismap" と記述します。

longdesc属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
img
必須
-
非推奨
-
属性値
URI

画像に関する詳細な説明がある URI を示します。何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境において効果が期待できます。alt属性は画像の表現する情報の代わりとなるテキスト情報で、title属性はあくまでも端的な説明を行うためのものであって、どちらも詳しい説明をするために長々としたテキストを指定するのは現実的ではありません。

詳細な説明を提供できるかどうかは現実問題として難しいものがありますが、たとえばlongdesc属性の実用的な使用例として、絵画を画像にした作品ギャラリーコンテンツがあるとして、その複数の画像1つ1つにきちんと説明をつけるようにしたいが、あくまでも当該ページ上では作品画像を見せるためのギャラリーの役割に徹しさせたい場合、説明のあるURIを別途で提示できるというのは有効ではないでしょうか。

なお、HTML5ではiframe要素と同様に longdesc属性が廃止されました。しかし、アクセシビリティ上の理由からimg要素のlongdesc属性については、HTML5 Image Description Extension (longdesc)という拡張仕様として策定が進行中です。現時点でもimg要素のlongdesc属性をサポートできていると言えるかどうかは別として、認識しているUAの数はそこそこあり、指定されたURIをツールチップで表示したり、コンテキストメニューの画像の詳細から指定されたURIを参照できたりします。将来的にはa要素で提供されるようなリンクとは別に、UAのコンテキストメニューから直接longdesc属性で指定されているURIへジャンプできるような機能を活用できることが期待できるようです。

name属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
img
必須
-
非推奨
  • 非推奨
  • HTML4.01 strict 廃止
  • XHTML1.0 strict 廃止
  • XHTML1.1 廃止
属性値
文字列

画像に名前をつけてスクリプト（JavaScriptなど）から参照できるようにします。name属性の値は半角アルファベットの大文字・小文字が区別されません（case-insensitive）。XHTML1.1 では name属性は完全に廃止されたため、代わりに id属性を使います。

src属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
img
必須
必須属性
非推奨
-
属性値
URI

画像ファイルの所在となる URI を指定します。src属性は必須属性です。

usemap属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
img
必須
-
非推奨
-
属性値
イメージマップ名

map要素で作成するクライアントサイド・イメージマップ（クリッカブルマップ）との関連づけをおこなう際に指定します。ハッシュ（#）を前置して usemap="#名前" という形で、map要素の name属性、または id属性の値を指定します。たとえば、map要素の name属性の値が name="map" であれば、img要素の usmap属性の値は usemap="#map" と指定します。

ただし、XHTML1.1 ではハッシュ（#）を前置する必要はありません。そのため、map要素の id属性の値が id="map" であれば、XHTML1.1 における img要素の usmap属性の値は usemap="map" と ID名だけを指定します。

vspace属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
img
必須
-
非推奨
  • 非推奨
  • HTML4.01 strict 廃止
  • XHTML1.0 strict 廃止
  • XHTML1.1 廃止
属性値
整数（pixels）

画像と周りの内容との間に垂直（上下）方向の余白を設けます。値は整数（ピクセル数で解釈）で指定します。余白の指定は、CSS の marginプロパティで代替指定することが推奨されています。

width属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
img
必須
-
非推奨
-
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

画像を表示するときの横幅を指定します。実際のサイズよりも大きくして表示することも可能ですが、その画像ファイルがもつ画像解像度は変わらないため、値を大きく指定した分、画像は荒く表示されます。また、画像のサイズをあらかじめ指定しておくとことで、UA は画像の読み込みを待たずに指定された画像サイズ分の領域をあけておいて、先に他の要素を表示するので、ページの全体像を早く表示することができます。

その他の属性

共通属性
イベント属性