画像を読み込むためのimg要素
<img />

　img要素は「Embedded image」の略で、画像を読み込む際に使います。Web標準を遵守するという点で、ラスタ画像にはPNG形式を、ベクタ画像にはSVG形式を使うのが一般的な原則とされています（参考「W3C QA - Buy standards compliant Web sites」）。

　インライン要素として機能するのに、終了タグがないのが特徴です。開始タグと終了タグを「<img src="sample.png" />」というふうに1つにまとめて記述します。

例

サンプル

<html>

    <head>

    <title>img要素のサンプル</title>

    </head>

    <body>

    

    <p><img src="sample.png" width="376" height="50" alt="サンプル" /></p>

    

    </body>

    </html>

DOMでの参照方法

[window.]document.getElementById（"【ID属性値名】"）

  [window.]document.images[i]

オプション属性

属性	値	機能	入力例	DOM参照
src （必須属性）	URI	画像ファイルの所在となる URIを指定	`<img src="./imag/sample.png" width="500" height="500" alt="イメージ画像" />`	`[window.]document.images[i].src [window.]document.getElementById（"【ID属性値名】"）.src`
alt （必須属性）	代替テキスト（alternative textの略）	画像情報の代替テキストを指定。全角で最大 512文字まで	`<img src="sample.gif" width="500" height="500" alt="サンプル画像" />`	`[window.]document.images[i].alt [window.]document.getElementById("【ID属性値名】").alt`
align	"left" "right" "top" "middle" "bottom"	画像のそろえ方を指定	`<img src="sample.png" width="400" height="300" alt="サンプル画像" align="left" />`	`[window.]document.getElementById（"【ID属性値名】"）.align [window.]document.images[i].align`
height	整数（pixels）、または、パーセンテージ値（％）	画像を表示するときの高さを指定	`<img src="sample.png" width="400" height="100" alt="サンプル画像" />`	`[window.]document.getElementById（"【ID属性値名】"）.height [window.]document.images[i].height`
width	整数（pixels）、または、パーセンテージ値（％）	画像を表示するときの横幅を指定	`<img src="sample.png" width="400" height="100" alt="サンプル画像" />`	`[window.]document.getElementById（"【ID属性値名】"）.width [window.]document.images[i].width`
ismap	"ismap" （XHTMLでは、 ismap="ismap" と指定）	CGIプログラムを利用したサーバサイド・イメージマップに指定。クリックした座標がプログラムへ送られる	`<a href="ismap.cgi"> <img src="map.png" width="100" height="50" ismap="ismap" /> </a>`	`[window.]document.getElementById（"【ID属性値名】"）.ismap [window.]doument.images[i]`
longdesc	URI	alt属性で説明しきれないほどの（※1）代替テキストが必要なとき、詳しく説明したリソースのURI を指定（※2）	`<img src="sample.png" width="500" height="500" alt="サンプル画像" longdesc="sample.html" />`	`[window.]document.getElementById（"【ID属性値名】"）.longDesc [window.]document.images[i].longDes`
usemap	イメージマップ名	map要素で作成するクライアント側イメージマップとの関連付けを行う際に指定（※3）	`<img src= "sample.gif" alt="" usemap="#imgmap" /> <map name="imgmap" id="imgmap"> <area href="item1.html" shape="circle" coords="20, 15, 10" alt="項目1" /> <area href="item2.html" shape="circle" coords="40, 15, 10" alt="項目2" /> <area href="item3.html" shape="circle" coords="60, 15, 10" alt="項目3" /> </map>`	`[window.]document.getElementById（"【ID属性値名】"）.usemap [window.]document.images[i].usemap`
name	文字列	img要素に任意の名前を付けてスクリプト（JavaScript など）から DOM参照できるようにする（※4）	`<img src="sample.png" width="500" height="500" name="sample" />`	`[window.]document.getElementById（"【ID属性値名】"）.name [window.]doument.images[i].name`
border	整数（pixels）	画像の周りにボーダー（境界線）を描画（※5）	`<img src="sample.png" width="500" height="500" border="1" />`	`[window.]document.getElementById（"【ID属性値名】"）.border [window.]doument.images[i].border`
hspace	整数（pixels）	画像の周囲に水平（左右）方向の余白を指定（※6）	`<img src="sample" width="500" height="500" alt="サンプル画像" hspace="50" />`	`[window.]document.getElementById（"【ID属性値名】"）.hspace [window.]doument.images[i].hspace`
vspace （非推奨属性）	整数（pixels）	画像の周囲に垂直方向の余白を指定（※6）	`入力例：<img src="sample.png" width="500" height="500" alt="サンプル画像" vspace="50" />`	`[window.]document.getElementById（"【ID属性値名】"）.vspace [window.]doument.images[i].vspace`

※1：全角の512文字（半角では、1024文字）を超えるテキスト
※2：主要Webブラウザでは、あまりサポートされていないが、国内の音声ブラウザで利用率の高いIBMの「ホームページ・リーダー」では、こちらのlongdesc属性がサポートされている
※3：XHTML1.0 Transitional、および、XHTML1.0 Framesetでサポートされているが、XHTML1.0 Strictではサポートされない属性
※4：XHTML1.0 Strict、および、XHTML1.1でサポートされないので、代わりにid属性を使う
※5：CSSのborderプロパティで代替することが推奨されている
※6：CSSのmarginプロパティで代替することが推奨されている

追加が可能なイベントハンドラ属性

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

HTMLタグリファレンスインデックス

有限会社タグパンダ
喜安亮介

2/6

INDEX
Web標準HTMLタグリファレンス（6）画像や動画をサイトに表示させる正しいXHTMLタグ画像・動画
	img 画像を読み込むためのimg要素
	object 外部アセットを読み込むためのobject要素
	param パラメータを指定するparam要素
	map クライアント側イメージマップを作成するmap要素
	area イメージマップを定義した場所とリンク先を指定するarea要素

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する