img要素(image)は指定した部分にイメージ(画像)を埋め込みます。終了タグはなく内容をもたない空要素です。src属性は必須属性で画像ファイルの所在となる URI を指定します。さらに、何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境においても画像の表現する情報を取得できるように必ず alt属性で代替テキスト(altanative text)を記述する必要があります。
画像は文字による説明に加えてユーザーの理解を促すために、または文章で表現するよりも画像で表現した方が分かりやすい情報の場合に使用します。たとえば、グラフや地図など、文章で説明するよりもその情報を画像として提供した方がわかりやすい性質の場合に適しています。ウェブページの見栄えを整えるためなどの装飾目的に使用することは、HTML の本義としては正しい使い方ではありません。なぜなら見栄えの調整のための画像では、それが何を表しているのかを適切な代替テキストの内容に置き換えることができない場合があるためです。環境に依存し、適切な代替方法を行うことができないこともあるため制作者はユーザーの視点に立って、それらは本当に必要なのかどうかをよく考えてから、必要最低限使用するようにしましょう。
画像とその後に続くテキストの揃え方を指定します。指定できる値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
align属性は非推奨属性のため、CSS の floatプロパティで左右の配置とその後に続くテキスト(複数行)の揃え方を、vertical-alignプロパティでテキスト(1行)との垂直方向の並びをそれぞれ代替することが推奨されています。また、回り込んだテキストを途中で解除したい場合は br要素に clear属性を指定すれば良いのですが、clear属性も非推奨属性のため、画像の後に続くブロック要素に clearプロパティを指定すると良いでしょう。
何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境において、その画像の表現する情報の代替となるテキストを記述します。alt属性は必須属性です。代替テキストは画像の内容を説明するのではなく、画像の表現する情報の代わりになるテキスト情報であって、画像の説明については title属性で提供するのが適切です。
画像の周りに境界線を表示させます。Macintosh版Internet Explorer 5 や Opera では border属性の初期値は "0" に設定されているため枠線は表示されませんが、UA によっては画像を内容にしたリンクが設定されている場合に枠線を表示するものがあります。その場合に border="0" を指定することで画像を内容にリンクを設定した場合でも枠を表示しないようにできます。ただし、border属性は非推奨属性のため枠の表示指定は、CSS の borderプロパティで代替指定することが推奨されています。
画像を表示するときの高さを指定します。実際のサイズよりも大きくして表示することも可能ですが、その画像ファイルがもつ画像解像度は変わらないため、値を大きく指定した分、画像は荒く表示されます。また、画像のサイズをあらかじめ指定しておくとことで、UA は画像の読み込みを待たずに指定された画像サイズ分の領域をあけておいて、先に他の要素を表示するので、ページの全体像を早く表示することができます。レンダリングがスムーズに行えるようにするためにも必須属性ではありませんが、height属性と対の画像の横幅を設定する width属性を指定しておくことが望まれます。
画像と周りの内容の間に水平(左右)方向の余白を設けます。値は整数(ピクセル数で解釈)で指定します。余白の指定は CSS の marginプロパティで代替することが推奨されています。
CGIプログラムを利用したサーバサイド・イメージマップの場合に指定します。ユーザーが a要素のリンクに設定された画像をクリックすると画像の中でクリックされた座標値(x座標, y座標)をウェブサーバーを通してプログラムへと送ります。HTML4.01 では ismap、XHTML では属性値を省略できないため ismap="ismap" と記述します。
画像に関する詳細な説明がある URI を示します。視覚によらない非視覚環境に対して有効なもので、alt属性や title属性の情報を補うために用います。alt属性は画像の表現する情報の代わりとなるテキスト情報で、title属性はあくまでも端的な説明を行うためのものであって、詳しい説明をするために長々としたテキストを指定するのは現実的ではありません。特にクライアントサイド・イメージマップ(クリッカブルマップ)を重要なナビゲーション部分に用いている場合などはテキスト中心で構成されているサイトマップの URI を longdesc属性で指定しておくのはとても効果的な使い方です。
画像に名前をつけてスクリプト(JavaScriptなど)から参照できるようにします。name属性の値は半角アルファベットの大文字・小文字が区別されません(case-insensitive)。XHTML1.1 では name属性は完全に廃止されたため、代わりに id属性を使います。
画像ファイルの所在となる URI を指定します。src属性は必須属性です。
map要素で作成するクライアントサイド・イメージマップ(クリッカブルマップ)との関連づけをおこなう際に指定します。ハッシュ(#)を前置して usemap="#名前" という形で、map要素の name属性、または id属性の値を指定します。たとえば、map要素の name属性の値が name="map" であれば、img要素の usmap属性の値は usemap="#map" と指定します。
ただし、XHTML1.1 ではハッシュ(#)を前置する必要はありません。そのため、map要素の id属性の値が id="map" であれば、XHTML1.1 における img要素の usmap属性の値は usemap="map" と ID名だけを指定します。
画像と周りの内容との間に垂直(上下)方向の余白を設けます。値は整数(ピクセル数で解釈)で指定します。余白の指定は、CSS の marginプロパティで代替指定することが推奨されています。
画像を表示するときの横幅を指定します。実際のサイズよりも大きくして表示することも可能ですが、その画像ファイルがもつ画像解像度は変わらないため、値を大きく指定した分、画像は荒く表示されます。また、画像のサイズをあらかじめ指定しておくとことで、UA は画像の読み込みを待たずに指定された画像サイズ分の領域をあけておいて、先に他の要素を表示するので、ページの全体像を早く表示することができます。レンダリングがスムーズに行えるようにするためにも必須属性ではありませんが、width属性と対の画像の高さを設定する height属性を指定しておくことが望まれます。
http://w3g.jp/xhtml/dic/img実績:大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー