Semantic(img vs background-img)

HTML要素の2種類

Semantic Web
「機械で理解できる形で作られたネットワークで、「意味論のネットワーク」という意味です.「セマンティックネットワーク」は、ドキュメントやアプリケーションの意味に基づいて組織され、理解しやすい意味を持つネットワークであり、コンピュータが人間の代わりに情報を読み、理解し、加工することができ、新しい情報を生成することができます.別の意味では、情報を分析することで、情報の関係から有意義な資料を抽出して展示するページです.
Semantic Webを作成する前に

<div id="header"></div>

考安後

<header></header>

コンピュータはこの部分が頭であることを理解することができます.
Semantic Tag
これはコンピュータネットワーク上で人と機械がより理解しやすく使用する形式のデータを用いてネットワークを発展させるために現れたラベルである.タグには意味があるため、コンピュータはHTML要素の意味をより明確に解釈し、そのデータを利用して意味網を実現することができる.また、検索エンジンのスクロールは、サイトに関する情報を比較的正確に提供することができる.
Semantic Tagのタイプ
見出し->ページの上部または一部の見出し
nav->ドキュメントのナビゲーション、メニュー項目の定義
Section->ドキュメントのパーティションの定義
記事->トピックを含むスペース
aside->文章のテーマに間接的に関連する部分を表す
main->ドキュメントの主な内容の定義
このほかにも多くのマークがあり、開発者は実際の状況に応じて適切なマークを使用して、マーク構造をよりイメージしなければならない(意味的に).
img vs background-img
どちらの方法でも画像をインポートできますが、違いがあります.imgタグにはsrcのほかにattributeが存在する.
イメージのロードに失敗した場合を考慮
img->破砕画像とaltに適したテキストが表示されます.
background-img->画像のみのロードに失敗し、何も表示されません.
img tagは意味のあるシンボルマークであり、コンピュータはそれを理解することができ、エラーが発生した場合、画像が破壊されても、どのような画像であるかを知ることができるが、background-imageは簡単な属性であり、エラーの情報は表示されない.
結論として、画像がエラーが発生したときに破壊された場合、画像に関する情報を表示しなければならない.検索エンジンがWebをよく表示する必要がある場合、適用された画像が内容の理解に役立つ場合、imgタグを使用すべきである.Webデザインなどのマイクロ要素だけで画像を表示し、失敗したときに何も見えない場合は、ページを表現するときに背景画像をより自然に使用します.