reflux flow > HTML/XHTMLリファレンス > HTML/XHTML 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, lang（xml:lang）, dir, style, xmlns（XHTML1.1のみ）
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
img要素は画像を配置するためのインライン要素です。src属性で画像のURIを指定し、alt属性で代替テキストを指定します。
img要素はインライン要素です。普通はブロックレベル要素の中で用います。
img要素を用いるときはalt属性で代替テキストを指定します。alt属性は必ず指定することになっています。
代替テキストというのは画像の代わりとなるテキストのことです。何らかの理由で画像が表示されない場合（例えば、音声や点字で出力するブラウザや、Lynxのようなテキストブラウザ）に、画像の代わりとして用いられるテキストです。
例えば、サイト名が書かれた画像（title.png）を見出しとして配置するときは次のように記述できます。
<h1><img src="title.png" alt="reflux flow" /></h1>このような代替テキストを付けると画像が表示されない場合でも"reflux flow"というサイト名であるということがわかります。
代替テキストは文章である必要はありません。画像が装飾のためのものならばalt="*"としても良いでしょう。また、特に意味のない画像であるならばalt=""とすることも考えられます（ただし、リンクのアンカーが画像だけの場合、代替テキストが空であるとクリックできなくなる可能性があります）。
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>![連絡先: r e f l u x f l o w [あっとまーく] g m a i l . c o m](/2009/06/rf.png "連絡先")