<img>の解説|クロノドライブのHTML辞典

<img>

対応ブラウザ Internet Explorer 2~ / Firefox 1~ / Opera 6~ / Safari 1~ / Google Chrome 1~
タグの分類 インライン要素 定義バージョン Strict, Transitional, Frameset
開始タグ 必須 終了タグ なし
用例
<p><img src="sample.jpg" alt="サンプル画像"></p>

属性

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>
	
サンプル画像