ばけらの HTML リファレンス(未完成)

bakera.jp > 鳩丸リファレンス > ばけらの HTML リファレンス(未完成) > 要素一覧 > img要素

img要素

要素名バージョン開始タグ終了タグ分類/親中身
img2.0, 2.x, 3.2, 4.0, X1.0, X1.1必須禁止%special;, %pre.exclusion;EMPTY
属性名バージョン属性値既定値備考
src3.2, 4.0, X1.0, X1.1%URI;#REQUIREDURI of image to embed
alt3.2, 4.0, X1.0, X1.1%Text;#REQUIREDshort description
longdesc4.0, X1.0, X1.1%URI;#IMPLIEDlink to long description (complements alt)
ismap4.0, X1.0, X1.1(ismap)#IMPLIEDuse server-side image map
usemap4.0, X1.0, X1.1%URI;#IMPLIEDuse client-side image map
height3.2, 4.0, X1.0, X1.1%Length;#IMPLIEDoverride height
width3.2, 4.0, X1.0, X1.1%Length;#IMPLIEDoverride width
name4.01, X1.1CDATA#IMPLIEDname of image for scripting
align3.2, (4.0), (X1.0)%IAlign;#IMPLIEDvertical or horizontal alignment
border(4.0), (X1.0)%Pixels;#IMPLIEDlink border width
hspace4.0, X1.0, X1.1%Pixels;#IMPLIEDhorizontal gutter
vspace4.0, X1.0, X1.1%Pixels;#IMPLIEDvertical gutter

共通属性 …… %coreattrs;, %i18n;, %events;

imgの解説

インライン画像を埋め込む要素です。

src属性で埋め込む画像の URI を、alt属性で代替テキストを指定します。代替テキストは画像が表示できない (もしくはしないように設定されている) 環境で、画像の代わりに使われるテキストです。

この二つの属性は必須です。特に alt は HTML4 以降は必須となっていますので、忘れないように指定してください。特に意味のないマークなどには alt="" として空の文字列を指定しておきましょう。HTML3.2 などでは alt は必須ではないのですが、それでも指定すべきです。特に、alt 属性が指定されていない場合には alt="" と同じになるとは限らないことに注意してください。alt がない場合、ブラウザは勝手に「画像があるようです」などと読み上げたりするかも知れません。

※実際、alt 省略時には [inline] などという意味不明な値が代替テキストになるブラウザがあったようです。

longdesc属性を使うと、もっと詳しい画像の解説にリンクすることができます。特に、図表やイメージマップには詳しい解説があると良いでしょう。もっとも、この属性に対応しているブラウザはあまりないようですので、別に説明へのリンクを用意した方が良いかも知れません。

widthheight は画像のサイズを指定します。この指定があると画像を読み込む前に画面レイアウトを決定することができ、画面の表示がスムーズに行われるようになります。画像のサイズと違う値を指定すると、拡大縮小されます。CGI やコンテント・ネゴシエーションによって違うサイズの画像が得られたりするようなケースでは、width や height を指定すると画像が歪んでしまうかも知れません。

align属性は、もともとインライン画像とテキストのベースラインとをどう揃えるかを規定する属性でした。HTML3.2 では同じ align 属性に left, right が指定できるようになり、画像をフロート化できるようになりましたが…… HTML4 ではこの属性は非推奨です。位置揃えもフロートの指定もスタイルシートで行うことが推奨されます。

border属性は枠線の指定です。二大ブラウザはリンクのついている画像にだけ枠線を表示するので、それを嫌って border=0 とすることがよくあります。リンクのついていない画像にも枠線を指定できます。……が、この属性もまた非推奨です。スタイルシートを使いましょう。

hspace属性vspace属性は、それぞれ画像の左右、上下の余白を指定します。やはり非推奨です。

人気のページ

最近の日記

関わった本など

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践ウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)友井町バスターズ (富士見ファンタジア文庫)

その他サイト