ここでは，画像の挿入，すなわち img 要素を詳説する。

　img 要素は，画像を挿入するための要素である。この要素はインライン要素（%Inline.mix;）に含まれ，要素の内容をもたない（空要素タグで記述）。

内容モデル

EMPTY

空

　usemap 属性については，クライアントサイドイメージマップの項で述べることにする。また，ismap 属性についてはサーバサイドイメージマップの項で述べることにする。

　必須の src 属性に挿入する画像の URI を与えることは，Let's begin XHTML の Section 7 で解説した。

　また，alt 属性も必須で，画像の性質，画像が挿入されているコンテキスト（文脈）に応じて適切な“代替テキスト”を与える必要がある。これは，画像が読み込めないときに表示されるテキスト，ページリーダで読まれるテキストなどに使われる。詳しくは Let's begin XHTML の Section 8 で解説したが，概略を復習しておくと，

• 必要なコンテンツとしての写真・イラストなどは，それがどんなものであるか，簡単な説明をつけておく（必要に応じて，“【図】”“【写真】”などと入れておくのもよいだろう；例としては，“【図】余弦定理の証明。”など）。
• ロゴなどは，それを文字に置き換えたテキストを代替テキストとしてつける。
• 特に意味のない，装飾的な画像は，“alt=""”（空の文字列）としておく。

のような感じである。

図 15.1 [D]

　longdesc 属性は，alt 属性と対照的に，その画像について長い説明が記されているリソースの URI を（必要であれば）与える。たとえば，本チュートリアル Section 13 の図 13.1 には，longdesc 属性に“図版について”のページの，当該の図の項目の URL が指定されている。Netscape 6 以降では，これを“画像のプロパティ”で確認することができる（たとえば，図 15.1）。

　また，本チュートリアルもこの方法を使用しているが，画像の直近に“[D]”のような文字列を挿入し，それにこの longdesc 属性の値をリンク先として設定しておくことも併用される。

　width 属性 および height 属性は，挿入する図の寸法を明示する。一般に，WWW で使用される GIF，JPEG，PNG 形式の画像は，固有の寸法（ピクセルサイズ）を持っており，無指定の場合はこの“固有の寸法”で出力される。しかし，描画をスムーズにするため，画像の固有の寸法を明示的に指定しておくほうがよい。

　width および height 属性の与え方は 2 とおりあり，

• 単位記号を伴わない場合，単位はピクセル
• 単位記号としてパーセント記号「%」を伴うと，このときの基準は，幅（width 属性），高さ（height 属性）それぞれいっぱいに表示できる幅を 100% とする（固有の寸法に対する割合ではない）

いずれの場合も，固有の寸法と異なった場合は拡大・縮小処理がなされる（拡大・縮小はブラウザ側が行うので，ダウンロードサイズ（ページの“重さ”）は変わらないことに注意）。width および height 属性のうち片方が指定されている状況では，画像は縦横比を保ったまま拡大・縮小される。

　本節の最後に，例として上にあげた“図 15.1”（URI は“f15-01.gif”，ピクセルサイズは横 388 ピクセル，縦 121 ピクセル）の部分のコードを示しておこう。なお，img 要素はインライン要素のため，キャプションなどを含めたコンテナとして class 属性に“fig”を指定した div 要素を使用していることに注意されたい。

<div class="fig" id="f15-01"><img src="f15-01.gif" alt="longdesc 属性の内容は，Netscape 6 以降で確認できる。" width="388" height="121" longdesc="hsxhad.htm#f15-01" /><br />図 15.1 <a href="hsxhad.htm#f15-01" class="internal" title="この図版について">[D]</a></div>