Img tag vs background-Image


面接前の質問では、
img tagと
divラベルにbackground-imageプロパティを追加する2つの方法の違いと,それらをどのような場合に使用するかの利点を理解した.
最初にこの質問に答える前に
私たちはまずSemantic WebとSemantic Tagを理解しなければ理解できません!
サイト上の検索エンジンの露出は非常に重要です.
検索エンジン最適化(SEO:Search Engine Optimization)などのツールを使用して、Webサイトを検索に適した構造に調整します.
しかし、基本的には、コンピュータはどのようにしてウェブサイトの情報を収集しますか?
「ロボット」(Robot)というプログラムを使って、世界各地からのサイト情報を毎日収集しています.
この動作をスクロールと呼び、検索エンジンのスクロールが実行します.
次に、検索サイトのユーザは、検索可能なキーワードを予め推定し、検索キーワードに対応するインデックスを作成します.これをインデックスと呼び、検索エンジンのインデックスが実行します.
インデックスを作成する際に使用する情報は、自動機が収集した情報を検索することです.
最終的にはウェブサイトのHTMLコードです.
すなわち,検索エンジンはhtmlコードのみを用いてその意味を説明すべきである.
シンボル要素が解析されます.
<span style=“font-size: 6px”> Hi How are you</span>
<h1> Hi How are you? </h1>
この2つのタグは、ブラウザ画面の出力と同じです.
しかし,spanタグの要素は意味的に意味がない.意図は不明であるが、2番目のh 1タグの要素はタイトル(タイトル)の最上位を表す.開発者が明確な要素を意図する意義.
これにより、コードの読み取りやメンテナンスが容易になるという利点が向上します.
検索エンジンは、通常、h 1要素の内容をWebドキュメントの重要なタイトルとして認識し、インデックスに含める.
H 1ラベルの要素がタイトルであることがわかります.
ビジュアル要素からなるWebページは、検索エンジンにより意味のあるドキュメント情報を提供し、検索エンジンもビジュアル要素を利用して効率的なスクロールとインデックスを実現します.
すなわち,心理タグはブラウザ,検索エンジン,開発者に明確なコンテンツの意味を提供することができる.
シンボルタグを使用することで、コンピュータはhtml要素の意味を解析し、これらのデータを利用することができ、シンボルネットワークを実現することができる.
心理ネットワークとは
仮想Webは,Web上に存在する大量のWebページをメタデータ(MetaData)に付与し,「意味」と「相関」を持つ膨大なデータベースとする考え方である.
HTLM要素は意味要素と非意味要素に分けられる.
意味要素
form,table,imgなど,これらのタグは内容の意味を明確に説明している.
非意味要素
div、spanなど、これらのタグは内容について何も説明しない.
HTML 5に新しく追加されたシンボルマークを次に示します.
header	- 헤더를 의미한다( 문서나 section의 헤더에 오는 태그)

nav -	내비게이션을 의미한다 (navigation links. 문서의 major link들 담는 태그. ex. 메뉴, 목차, 색인)

aside	-사이드에 위치하는 공간을 의미한다 (문서의 content의 옆쪽에 위치하여 내용과 관계가 적음. 광고를 추가하기도 함.)

section - 본문의 여러 내용(article)을 포함하는 공간을 의미한다 (관련 있는 주제들끼리 grouping 해주는 태그 (문서 구획))

article - 분문의 주내용이 들어가는 공간을 의미한다
(독립적으로 의미가 있는 컨텐츠. 웹사이트의 나머지 부분과 독립적으로 읽더라도 의미를 이해할 수 있는 내용을 주로 담음. ex. 블로그 포스트나 기사)

footer - 푸터를 의미한다. (문서의 정보를 담고 있는 태그. ex. 문서의 저자, copyright 정보, term of use 링크)
今から本題に戻って、最初の質問に答えます.
Imgラベルと背景-画像の違いは、検索エンジンが画像をより明確に表示し、より的確にし、コンピュータまたは人が一度に画像を表示できるようにする視覚要素imgラベルを使用することです.
だから
imgタグを使用することが望ましい.
1.印刷が必要な場合
->出力時にバックグラウンド画像が含まれないためです.
2.画像が文字で意味がある場合.
->altタグは、一時的なテキストがあるため、画像を識別します.
3.イメージは最も重要なコンテンツセンターです.
background-imageを使うともっといいです.
1.一定の部分だけを選んで展示すると
2.画像にテキストがある場合
3.ページ全体の出力時に画像を削除する必要がある場合は、次の操作を行います.
->出力時にbackground-imageを出力しません.
4.背景全体を拡大表示する場合に使用
やればいい.
background-imageは非意味要素にセレクタを提供するため、cssとしてimgタグ(通常は視覚要素)を使用することを推奨します.