HTMlおよびCSSのSemanticおよびnon-semanticを事例によって比較した.

1.Semantic WebとSemantic Tag

1) Semantic Web

Semantic Webとは「有意義なネットワーク」を意味し、정보と자원との間の관계と의미 정보をコンピュータで処理可能な完全として表現して処理する技術をいう.
📁 ウィキペディア:仮想ネットワーク
このように聞く意味は少しぼやけているかもしれませんが、簡単に言えばHTMLの中の要素にラベルを貼って、コンピュータ(ブラウザ)も人も簡単に理解して閲覧することができます.このようなSemantic Webは1998年、W3Cに提出された.
つまり、Semantic Webを介して、Web上では접근성(accessibility)を使用することが望ましい.

2) Semantic Tag

Semantic Webが上と同じなら、Semantic Tagは当然ブランド品を言っています.

3）Semantic Tag元素

ブランドに対する人とパソコンの意味を同じにするために、勝手につけてはいけない名前.その意味が確定したSemantic Tagの要素は以下の通りである.
<div>および<span>は、Non-semantic、すなわち意味のないマーカーである.
また、要素の詳細については、次のリンクを参照してください.
📁 Semantic Tag元素

2.Semantic WebとNon-Semantic Web

1）画像挿入時の意味と非意味

Webサイトに画像を配置する方法で、SemanticとNon-Semanticを比較します.まず、画像をウェブサイトに入れる方法は大きく2つに分けられます.
(1)HTMLに<img>マークを用いる

<img src="hamster.png"
     alt="Golden striped fluffy hamster">

(2)CSSの<div>タグにbackground-image属性を追加する
- HTML

<div class="hamster-img">햄스터 🐹 </div>

- CSS

.hamster-img {
  background-image: url("hamster.png");
}

上記(1)号はSemantic方法、(2)号はNon-semantic方法である.

2）意味比較

（1）アクセス性

(1)HTMLに<img>タグが使用される場合、Semantic Tagが使用され、ブラウザもこの点を理解し、SEO(検索エンジン最適化)に有利である.また、視覚障害がある場合は、スクリーンリーダーを介してウェブページを読むことができ、ここでは、画像代替テキストaltの属性内のテキストを読むことができる.このような場合、「ここには金色の縞模様のハムスターのイメージがある」と教えてくれます.
しかしながら、(2)号のようにbackground-image属性で画像を入れる場合、alt属性を入れることができず、スクリーンリーダーを使用するユーザのアクセス性が低下する.
次のリンクではaltプロパティに追加する要素を整理します.
📁 alt属性要素

(2)理解度

イメージに間違いがあったらどうなりますか?
(1)Semantic Webのように、broken imageおよびaltのテキストが表示される.では、Webユーザーが画像を持っていなくても、「ああ、ここに金色の縞模様のハムスターがいる!」と言います.そしてウェブページを理解することができます.
ただし(2)Non-semantic Web回目に画像エラーが発生した場合、何の情報も露出することなく、ひどくなりすぎてしまう.(ないようです!)それらの情報がWebページを理解するために必要なコンテンツである場合、ユーザーの理解度が低下します.
しかし、画像エラーテキストを露出しない方が自然であり、画像がウェブページの内容を理解するのに影響を及ぼさない場合には、Non-semanticの方法を用いることもできる.

(3)その他

このほか、Semantic Tagに整理されたHTMLは、<div>と<span>のマークのみからなるHTMLよりも開発者の立場でメンテナンス管理に便利である.

3.結論

Semantic Webなら.
**1. SEO(検索エンジン最適化)に有利であり、ユーザーのアクセス性を向上させる.
2.視覚障害者と同様に、スクリーンリーダーを使用してWebページを読むと、理解度とアクセス性が向上します.(画像に誤りがなければ、broken imageおよびaltのテキストを用いて画像を置き換えることができ、一般ユーザのウェブページに対する理解を向上させることができる)
3.開発者にとって、メンテナンスも便利です.
ただし,画像挿入が理解ページに影響を及ぼさなければ,Non-semanticの手法を用いることも可能である.
リファレンス
🔗 ビジネスネットワーク
🔗 HTML: A good basis for accessibility
🔗 HTML Semantic Elements
🔗 Images in HTML