<img>
| 対応ブラウザ | Internet Explorer 2～ / Firefox 1～ / Opera 6～ / Safari 1～ / Google Chrome 1～ | ||
|---|---|---|---|
| タグの分類 | インライン要素 | 定義バージョン | Strict, Transitional, Frameset |
| 開始タグ | 必須 | 終了タグ | なし |
| 用例 |
|
||
属性
| src | 概要 | 表示する画像ファイルを指定します（必須属性）。 |
|---|---|---|
| 属性の値 | URI | |
| alt | 概要 | 画像を表示できないブラウザの場合に、画像の代替テキストを指定します。 |
| 属性の値 | テキスト | |
| longdesc | 概要 | 画像の説明がtitle属性でおさまらない長文の場合、画像を説明した文書へのリンクを指定します。 |
| 属性の値 | URI | |
| name | 概要 | 画像の名前を指定します。 |
| 属性の値 | 文字列 | |
| width | 概要 | 画像の横幅をピクセル、パーセンテージで指定します。 |
| 属性の値 | 数値、% | |
| height | 概要 | 画像の高さをピクセル、パーセンテージで指定します。 |
| 属性の値 | 数値、% | |
| usemap | 概要 | <map>タグを使用し、イメージマップの関連付けを行います。 |
| 属性の値 | マップ名 | |
| ismap | 概要 | サーバーサイド・イメージマップを実現します。 |
| 属性の値 | (ismap) | |
| align | 概要 | 表示位置と、テキストが画像を回りこむかどうかを指定します。 |
| 属性の値 | top、middle、bottom、left、right | |
| border | 概要 | 画像の周りにおけるボーダーラインの太さを指定します。 |
| 属性の値 | 数値 | |
| hspace | 概要 | 画像の左右の余白をピクセルで指定します。 |
| 属性の値 | 数値 | |
| vspace | 概要 | 画像の上下の余白をピクセルで指定します。 |
| 属性の値 | 数値 |
<img>とは
「IMG」とは「image」の略で、文書内に画像を表示するためのタグです。
表示する画像ファイルはsrc属性で指定し、WEB上ではGIF形式（*.gif）、JPEG形式（.jpg）、PNG形式（*.png）の画像形式を指定することができます。
HTML4.01 では、<img>タグにalt属性が必須とされています。alt属性は、画像が表示できないブラウザで画像を見た場合に替わりに表示するテキストで、読み上げソフトで読み上げられたり、点字で表現されたりする場合もあります。ただし、HTML5では必須でなくなりました。
width属性とheight属性は、ブラウザ上で画像の表示サイズを指定します。必須ではありませんがブラウザがページを読み込む際に指定したサイズ分の画像スペースを先に表示し、テキスト部分の読み込みを始めることができます。このことで、閲覧者の体感速度が上がりますので、できるだけ指定するようにしましょう。
サンプルデモ
align="top"：画像の上のラインに合わせてテキストを表示する。
<p><img src="/img/dictionary/html/sample.png" height="300" width="400" alt="サンプル画像" align="top" >サンプルテキストサンプルテキスト</p>
align="middle"：画像の中央のラインに合わせてテキストを表示する。
<p><img src="/img/dictionary/html/sample.png" height="300" width="400" alt="サンプル画像" align="middle" >サンプルテキストサンプルテキスト</p>
align="bottom"：画像の下のラインに合わせてテキストを表示する。
<p><img src="/img/dictionary/html/sample.png" height="300" width="400" alt="サンプル画像" align="bottom" >サンプルテキストサンプルテキスト</p>
align="right"：テキストの右側に画像を表示する。
<p><img src="/img/dictionary/html/sample.png" height="300" width="400" alt="サンプル画像" align="right" >サンプルテキストサンプルテキスト</p>
border="値"：画像の周りにボーダーラインを指定します。
<p><img src="/img/dictionary/html/sample.png" height="300" width="400" alt="サンプル画像" border="3" >サンプルテキストサンプルテキスト</p>
