img要素

概要

img要素は画像を配置するためのインライン要素です。

要素の内容

img要素は空要素です。HTMLでは終了タグを省略して<img ...>と記述し、XHTMLでは<img ... />とします。

属性

固有属性

非推奨とされている属性はHTML4.01 Transitional/Frameset、XHTML1.0 Transitional/Framesetのみで利用できます。

属性名 属性値 説明
src URI 必須属性。読み込む画像のURIを指定します。必ず指定する必要があります。
alt Text 必須属性。代替テキスト(画像の代わりとなるテキスト)を指定します。必ず指定する必要があります。
longdesc URI 画像の詳細な説明をしている文書のURIを指定できます。
name CDATA HTMLのみ。画像に識別子を付けることができます。識別子はid属性で指定することが推奨されています。この属性はXHTMLでは指定できません。
height Length 画像の高さ(縦の長さ)を指定できます。実際の大きさと異なる場合は縮小・拡大されます。
width Length 画像の幅(横の長さ)を指定できます。実際の大きさと異なる場合は縮小・拡大されます。
usemap URI(XHTML1.1の場合はIDREF クライアントサイドイメージマップを用いる場合に、map要素のURIを指定します。
ismap (ismap) サーバサイドイメージマップを用いる場合に指定します。HTMLの場合は単にismapと記述し、XHTMLの場合はismap="ismap"とします。
align top | middle | bottom | left | right 非推奨属性。周りのテキストに対する画像の位置を指定できます。
border Pixels 非推奨属性。画像の周りの枠の幅を指定できます。
hspace Pixels 非推奨属性。画像の左右の空白の長さを指定できます。
vspace Pixels 非推奨属性。画像の上下の空白の長さを指定できます。

汎用属性

id, class, title, langxml:lang), dir, style, xmlns(XHTML1.1のみ)

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

説明

img要素は画像を配置するためのインライン要素です。src属性で画像のURIを指定し、alt属性で代替テキストを指定します。

img要素はインライン要素です。普通はブロックレベル要素の中で用います。

alt属性(代替テキスト)

img要素を用いるときはalt属性で代替テキストを指定します。alt属性は必ず指定することになっています。

代替テキストというのは画像の代わりとなるテキストのことです。何らかの理由で画像が表示されない場合(例えば、音声や点字で出力するブラウザや、Lynxのようなテキストブラウザ)に、画像の代わりとして用いられるテキストです。

例えば、サイト名が書かれた画像(title.png)を見出しとして配置するときは次のように記述できます。

<h1><img src="title.png" alt="reflux flow" /></h1>

このような代替テキストを付けると画像が表示されない場合でも"reflux flow"というサイト名であるということがわかります。

代替テキストは文章である必要はありません。画像が装飾のためのものならばalt="*"としても良いでしょう。また、特に意味のない画像であるならばalt=""とすることも考えられます(ただし、リンクのアンカーが画像だけの場合、代替テキストが空であるとクリックできなくなる可能性があります)。

title属性

Internet Explorerでは、img要素にマウスのポインタを重ねるとalt属性値がツールチップ(ポップアップ?)で表示されます。しかし、これはIE独自の仕様で、他のブラウザ(FirefoxやOperaなど)はalt属性値をツールチップでは表示しません。

img要素の補足情報を付けたい場合はalt属性ではなくtitle属性を用います。多くのブラウザがtitle属性値をツールチップで表示し、IEもtitle属性がある場合はalt属性ではなくtitle属性の値をツールチップで表示します。

<!-- title属性の例 -->
<h1><img src="title.png" alt="reflux flow" title="サイト名" /></h1>

関連要素