2009-08-24 11 views
7

背景とimgタグを持つdivに関するベストプラクティスは何ですか?背景のある部門は、その上に何かを置くことができますが、そうではない場合は、その場合には、好ましい方法である画像があることを理解していますか?多分もっと良い質問は.. imgタグは時代遅れですか?イメージがリンクしている場合、imgタグまたはdivを使用する必要がありますか?イメージの背景とimgのタグのDivs

ありがとうございます! Matt Mueller

答えて

15

divの背景は、次のようなものでなければなりません。 imgタグは、実際の画像を画像そのものとして表示しているとき、つまり何かの画像を表示しているときに使用します。あなたはイメージタグを使用し、divは使用しないでください。

+2

よく+1 – annakata

5

はレイアウトやコンテンツの画像ですか?

画像がレイアウト関連している場合、私はCSSを使用して、それはdiv要素を持っているでしょう...その内容が関連する場合、私は... IMGに役立ちます

希望を、それを持っているでしょう!

1

IMGタグは廃止されていません。あなたは、あなたのシステムから来たり来たりする、動的なイメージでそれを使用します。

divの背景画像は、デザインの一部である静的な画像がある場合に便利です。場合によっては、それらを1つの大きな画像にマージして、ロード時間とプロページのHTTPリクエスト数を最小限に抑えることができます。

9

セマンティックマークアップとしてそれについて考える:それは限りページの意味として、ページ上の「イメージ」である場合

  1. 、imgタグを使用しています。

  2. ページの意味に重要でないもの、つまり、任意の種類の要素(divだけでなく)に背景画像を使用します。

この違いは実際にほとんどのブラウザでどのようにページが表示さには関係が、視覚的に画像を解釈していない人に異なる意味を持ちません。

視覚障害者が要素をどのように解釈するのか想像してみてください。

また、検索エンジンによって若干異なる動作が発生する可能性があります。検索エンジンが画像検索の背景画像を取得するかどうかはわかりません。実際にイメージをそこから取り出したい場合は、imgタグが安全です。

+1

正確には意味論です。また、 'img'タグには' alt'属性があることに注意してください。この代替テキスト(例えば、画像を記述する)は、画像が意味的意味を有するシナリオに有用であり、聴覚障害のための検索エンジン、テキスト読み上げアプリケーション、および貧弱なインターネット接続に使用することができる。 –

+1

それはプリンタに優しいことは言うまでもありません。 –

5

これを見るには、スタイルシートをオフにしてサイトを表示するのが良い方法です。あなたはすぐに、背景画像を持つすべてのDIVタグが表示されないことを知ります。すべてのあなたのIMGタグ画像は、どこにあるべきなのですか?私は、サイトデザインとレイアウトのすべての面で背景画像を持つDIVタグを使用し、他のすべてに対してIMGタグを使用します。

IMGタグには、altプロパティとtitleプロパティがあります。これらは、画像がロードされていないとき、またはテキストのみのスクリーンリーダー型ブラウザではイメージの代わりに使用されます。