テキスト中で、或テキストの代りに畫像で表現を出來た方が良い場合に、img要素を用ゐて畫像を埋め込みます。と云ふ譯で、必然的にimgはインライン要素となります。
src屬性と、alt屬性の記述が必須です。
SGML的に、或は「マークアップ」の理念から言つて、imgの仕樣は美しくありません。マーク附けと云ふ原則に基いて作られてゐるHTMLの中で、imgの仕樣は浮いてしまつてゐます。ヴェンダが獨自に策定して廣めてしまつた仕樣である爲、仕方がないのですが。
alt屬性は、アクセシビリティを考慮して、後から「必須」の屬性として仕樣に追加されたものです。本來あるべきテキストをalt屬性の値として「マーク附け」する、と云ふ説明は、かなり苦しい説明です。
さう云ふ譯で、汎用の埋め込み要素として、object要素が提唱されてゐます。一時期まで、「imgはobjectに取つて代られるべきだ」と云ふ事になつてゐたくらゐです。(さすがにこの「急進的」な提言は、撤囘されました)
現状、objectがimgの完全な代用として用ゐられてゐるケースは稀です。チャレンジャーな人は、img全廢に走るのも面白いでせう。ただ、一部のブラウザで、object要素による畫像埋め込みが巧く處理されません。例へば、Internet Explorerは多くの場合、object要素を適切に處理出來ません。そもそも、餘りに抽象的な要素であるため、objectの仕樣を適切に實裝したブラウザは必ずしも多くありません。
objectは、單純に畫像等のマルチメディアデータを埋め込む爲だけに策定された要素ではなく、或意味、divやspanをも置換へ得る汎用的な要素として定義されてゐます。objectを單にimgの代りの要素と看做すのは、必ずしも正解とは言へません。
終了タグは存在しません。單獨で記述します。
<p><img src="umagerion.png" alt="量産型エヴァ">……を見た時、時代は馬だ! と感じました。電波が飛んできたみたいです(謎)。</p>記述されるべきテキストが無く、ただ畫像を埋め込む目的で使用する場合、alt屬性の屬性値は空のテキストを指定します。
<p><img src="new.png" alt="">平成××年4月1日、「ナハハさん」コーナを更新しました。</p>ただ畫像を埋め込む
と云ふ目的自體に問題がある、と云ふ説もあります。まあ、Internet Explorerで閲覽される事しか望んでゐない廣告屋さんは、この手の記述を使つて下さつても結構です。
リストの各行の頭などに畫像を用ゐたい場合、p要素を書き並べて、pの中身の最初に、一々img要素を記述する制作者がゐます。しかし、リストはli要素で表現し、list-style-imageでマーカの畫像を指定する方が、より「スマート」な記法だと言へます。
XHTMLでは、常に開始タグと終了タグの記述が必須です。空要素であるimgでも、開始タグと終了タグの兩方を記述する必要があります。この場合、imgと云ふタグではなく、開始タグと終了タグに挾まれたゼロの内容がimg要素の内容である、といふことになります。
<p><img src="umagerion.png" alt="量産型エヴァ"></img>……を見た時、時代は馬だ! と感じました。電波が飛んできたみたいです(謎)。</p>或は、短縮タグ機構のルールに基き、以下のやうに記述します。
<p><img src="umagerion.png" alt="量産型エヴァ" />……を見た時、時代は馬だ! と感じました。電波が飛んできたみたいです(謎)。</p>記述されるべきテキストが無く、ただ畫像を埋め込む目的で使用する場合、alt屬性の屬性値は空のテキストを指定します。
<p><img src="new.png" alt="" />平成××年4月1日、「ナハハさん」コーナを更新しました。</p>原則はHTMLの場合と一緒です。
imgをぽつんとbodyの直下に記述する制作者が澤山ゐます。畫像を表示できれば良いと思つてゐるらしいのですが、もちろん、さう云ふ記述の仕方は、好ましくありません。
imgはインライン要素だから、と言つて、安易にimgをpやdivで括る人がゐます。さう云ふ事をするのは、「わかつてゐない」人ばかりではありません。必ずしも間違ひとは言へませんが、手拔きをしてゐると評されても仕方のない事でせう。
CG作家は、ギャラリーを作る際に、定義リストを利用するのはどうでせうか。dtにimgを置いて、ddにその説明などを書くのです。
また、文章の流れの中で、前後から獨立して畫像を示す場合、ul-liの中にimgををさめてみるのはどうでせうか。リストの「擴大解釋」ですが、文章以前の語句を書き竝べる際に用ゐるリストを、インライン要素であるimgを竝べる際に使用しても、妥當でないとは言へないでせう。
なぜか、多くのブラウザがa要素の中にimg要素のある時、ホットスポットを表現する爲にimg要素のborderを見せようとします。
Cascading Style Sheetsでa要素中のimgのborderを消す場合、セレクタはaではなくa imgにしなければなりません。
しかし、Netscape Navigator 4.xでは、この指定を適切に處理出來ません。複數の畫像が存在する時、それらの畫像にCSSによる指定のされてゐる場合、Navigatorはそれらの畫像の埋め込まれたHTML文書の整形に失敗します。
畫像を表示出來ないブラウザでは、altの屬性値が展開されます。しかし、屬性値の情報ではなく、飽くまで畫像の情報を見て貰はなければならない、と云ふ場合もあるでせう。
さう云ふ場合、仕方がないので、畫像ファイルにリンクを張つておきませう。imgをa要素の中身として括つておきます。畫像が表示されない環境では、代替テキストが畫像へのリンクとして表示されます。代替テキストには、その畫像で表現されてゐる概念が重要な概念である事をはつきり書いておきます。
アクセシビリティもへつたくれもない非常手段ですが、とにかく畫像が大事なのだと云ふアピールだけして、ごまかすしかありません。文字情報だけで全てを傳へられない場合もあるので、時には妥協が必要です。
Googleやはてなアンテナが文書を拾つて行つて、檢索結果等でさはりの文章を表示する事があります。その時、imgのalt屬性に記述されたテキストを展開しないやうです。
テキストベースのブラウザではimg要素の處理は割と「正しい」やうですが、ブラウザでないユーザエージェントではきちんと扱へないものもあるやうです。imgの仕樣が拙いやうな氣もしますが、サイト制作者の人は一往、それらのユーザエージェントの事も念頭に置いて良いでせう。