img要素
要素名 | バージョン | 開始タグ | 終了タグ | 分類/親 | 中身 |
---|---|---|---|---|---|
img | 2.0, 2.x, 3.2, 4.0, X1.0, X1.1 | 必須 | 禁止 | %special;, %pre.exclusion; | EMPTY |
属性名 | バージョン | 属性値 | 既定値 | 備考 |
---|---|---|---|---|
src | 3.2, 4.0, X1.0, X1.1 | %URI; | #REQUIRED | URI of image to embed |
alt | 3.2, 4.0, X1.0, X1.1 | %Text; | #REQUIRED | short description |
longdesc | 4.0, X1.0, X1.1 | %URI; | #IMPLIED | link to long description (complements alt) |
ismap | 4.0, X1.0, X1.1 | (ismap) | #IMPLIED | use server-side image map |
usemap | 4.0, X1.0, X1.1 | %URI; | #IMPLIED | use client-side image map |
height | 3.2, 4.0, X1.0, X1.1 | %Length; | #IMPLIED | override height |
width | 3.2, 4.0, X1.0, X1.1 | %Length; | #IMPLIED | override width |
name | 4.01, X1.1 | CDATA | #IMPLIED | name of image for scripting |
align | 3.2, (4.0), (X1.0) | %IAlign; | #IMPLIED | vertical or horizontal alignment |
border | (4.0), (X1.0) | %Pixels; | #IMPLIED | link border width |
hspace | 4.0, X1.0, X1.1 | %Pixels; | #IMPLIED | horizontal gutter |
vspace | 4.0, X1.0, X1.1 | %Pixels; | #IMPLIED | vertical gutter |
共通属性 …… %coreattrs;, %i18n;, %events;
imgの解説
インライン画像を埋め込む要素です。
src属性で埋め込む画像の URI を、alt属性で代替テキストを指定します。代替テキストは画像が表示できない (もしくはしないように設定されている) 環境で、画像の代わりに使われるテキストです。
この二つの属性は必須です。特に alt は HTML4 以降は必須となっていますので、忘れないように指定してください。特に意味のないマークなどには alt="" として空の文字列を指定しておきましょう。HTML3.2 などでは alt は必須ではないのですが、それでも指定すべきです。特に、alt 属性が指定されていない場合には alt="" と同じになるとは限らないことに注意してください。alt がない場合、ブラウザは勝手に「画像があるようです」などと読み上げたりするかも知れません。
※実際、alt 省略時には [inline] などという意味不明な値が代替テキストになるブラウザがあったようです。
longdesc属性を使うと、もっと詳しい画像の解説にリンクすることができます。特に、図表やイメージマップには詳しい解説があると良いでしょう。もっとも、この属性に対応しているブラウザはあまりないようですので、別に説明へのリンクを用意した方が良いかも知れません。
width と height は画像のサイズを指定します。この指定があると画像を読み込む前に画面レイアウトを決定することができ、画面の表示がスムーズに行われるようになります。画像のサイズと違う値を指定すると、拡大縮小されます。CGI やコンテント・ネゴシエーションによって違うサイズの画像が得られたりするようなケースでは、width や height を指定すると画像が歪んでしまうかも知れません。
align属性は、もともとインライン画像とテキストのベースラインとをどう揃えるかを規定する属性でした。HTML3.2 では同じ align 属性に left, right が指定できるようになり、画像をフロート化できるようになりましたが…… HTML4 ではこの属性は非推奨です。位置揃えもフロートの指定もスタイルシートで行うことが推奨されます。
border属性は枠線の指定です。二大ブラウザはリンクのついている画像にだけ枠線を表示するので、それを嫌って border=0 とすることがよくあります。リンクのついていない画像にも枠線を指定できます。……が、この属性もまた非推奨です。スタイルシートを使いましょう。
- 「img要素」にコメントを書く