img要素は、src属性で指定した画像ファイルを表示します。画像ファイルとして一般的なのはJPEG(じぇいぺぐ)やGIF(じふ)形式などですが、比較的新しいブラウザではPNG(ぴーえぬじー)形式もサポートしているようです。
HTML4.0以降では、src属性に加えてalt属性が必須属性とされています。画像の表示されないブラウザや音声ブラウザに対して画像の代わりとなる代替テキストを記述します。見出しや装飾のために使用する内容のないイメージなどには、alt=""のように空のテキストを指定します。
img要素にwidth属性とheight属性を指定しておくと、ブラウザ側で画像の表示スペースを事前に確保できるため、画像の後に続く内容をすばやく表示させることができます。
*1 alt属性は、ie7までは「チップヘルプ」として表示されましたが、ie8からWeb標準(W3Cの仕様)に従い、その仕様は廃止されました。ie8以降で「チップヘルプ」を表示する際にはtitle属性を使用します。
画像によるリンク
<a href="anchor3.htm"><img src="img/house1.jpg" alt="ペルージャの家" width="102" height="76"></a>
<!-- H2-x1 ie1- N1- -->
イメージを用いたリンクでは、デフォルトで2px程度の枠線が表示されます。この枠線を消すためには、img要素の属性にborder="0"
と指定します。
<a href="anchor3.htm"><img src="img/house1.jpg" alt="ペルージャの家" width="102" height="76" border="0"></a>
<!-- H2-x1 ie1- N1- -->
<a href="anchor3.htm"><img src="img/house1.jpg" alt="ペルージャの家" width="102" height="76"
style="border-width:0;"></a> <!-- H2- ie1- N1- -->
<a href="anchor3.htm"><img src="img/house1.jpg" alt="ペルージャの家" width="102" height="76"
style="border:none;"></a> <!-- H2- ie1- N1- -->
<img src="xxx.gif" alt="">
の後ろにスペースや改行を入れると、画像の下に隙間が表示されます。これを回避するためには、
<img src="xxx.gif" alt=""><img
src="yyy.gif" alt="">
のようにタグ内で改行するか、
<img src="xxx.gif" alt=""><!--
--><img src="yyy.gif" alt="">
のようにHTMLの
コメントを併用してソースを改行します。