TIL 011 <img/> vs background-image

🎯 意味を理解すればイメージが見えます.
意味
プログラミングでは、「意味」は意味を表す.
HTMLの意味
HTML表記を行う場合は、コンテンツ(データ)を表すタグを用いて記述する.
コンテンツを表すタグとは?
コード内のコンテンツ(データ)の意味をブラウザおよび開発者に明確に示す要素のタイプは、次のとおりです.

<header>, <main>, <nav>, <section>, <summary>, <footer> etc..

<div>、<span>は非意味タグであり、要素がどのような内容を持っているかに関する情報は含まれていないことに注意してください.
意味寸法の利点
1)検索エンジンの最適化に有利である.すなわち,検索にうまく露出し,ユーザのアクセスを増やすことができる.
2)有意義な表示により,視覚障害のあるユーザは,スクリーンリーダーを用いてページを容易に閲覧できる.
3)コードブロックの検索やコードの意味の理解が容易である.
4)開発者は、ラベルに記入するデータ型を容易に特定できます.
どのラベルが内容(データ)をよく表すかを自分に聞いてみましょう.
イメージに入れたいあなたの選択は?
大体2つの方法があります.

HTMLから<img src="..." alt="...">にパスを接続する方法

.

CSSからbackground-image{ url(...)}へのルーティング方法

<image> in HTML
画像がコンテンツに重要な役割を果たす場合に使用します.<image>が使用される場合、上述したビットマークの利点はいずれも適用される.
すなわち、ユーザは、画像情報を含む文(<image>のattribute altに画像を含む情報)を定義することによって、画像がロードされていない場合にどのような画像が表示されるかを知ることができ、視覚障害のあるユーザは、スクリーンリーダーによってその意味を知ることができる.
background-image property in CSS
内容を理解するには画像が必要ではない、つまり、設計上画像が必要な場合にのみ使用することが望ましい.
また、background-imageプロパティを使用してロードされた画像は、Googleロボットによってスクロールされたりインデックスされたりすることがなく、ユーザーのアクセス性が低下します.