HTML Non-Semantic, Semantic

> Semantic Web

セマンティックネットワーク
Semantic Webの創始者チームBurners Lee
コンピュータが処理できるWebドキュメント、サービスの情報、および現在のインターネットなどのリソースの関係、およびこれらの情報とリソースの関係を表すフレームワークおよび技術.
HTML 5では、Semantic Webがタイトルを
過去と現在のSemantic Webの違いを以下で確認できます.<header>はい<h1>・<h6>タイトルのリンク・紹介内容を含むラベル

<header>
  <h1>
     Everything you need to know about pizza!
  </h1>
</header>

<div id="header">
  <h1>
    Everything you need to know about pizza!
  </h1>
</div>

使用<header>ラベルでコードを読みやすくする<h1>タグ内部の<div>タグは内容の詳細を提供していないが、これとは異なる<header>タグ識別タグ内部の内容がより容易でアクセス性が良い

> Semantic Tag

Webページを構築する際に、非マイクロと有意義なHTMLの組み合わせを使用します.
文字通り
セマンティック:セマンティックに関連するセマンティック要素は、開いたタグと閉じたタグの間でコンテンツに関する情報を提供します.
前述のようにラベルを見ると<div>ラベルと<span>ラベルは該当するラベルだけを見ると何も提供されないので意味上の要素ではありません

非意味tags:div、spanタグ等
内容に意味も説明もない

意味tags:table、header、footer、navタグなど
何のために使うのか、内容の意味を明確に説明する

意味tagリファレンス

why?

<div>ラベルは簡単に言えば分割空間、分割領域、つまり分割領域<table>タグはHTMLドキュメントにテーブルを作成するタグ、すなわちWeb上にテーブルを表示するためのタグ<footer>ラベルは、区画の作者、著作権情報、関連書類等の内容を下に置く場合の意味で一般的に用いられる
このように,このタグの意味だけでnon-shemantic tagとsemantic tagの違いがわかる.

>なぜSemantic Tagを使うのですか?

意味タグは、モバイルデバイス、障害者がWebページにアクセスできるようにします.
ブラウザはコードを上手に分割できますが、HTML表記言語、コードの購読性を理解しやすくアクセスできるという利点があります
画像をWebサイトに入れるには2つの方法があります<img>ラベル、<div>ラベルに背景-画像属性を追加するには、次の操作を行います.

・<img>Webドキュメントに画像を提供するために使用されるタグをマークし、そのページの実際の内容をより直感的に見えるようにする場合に使用する

背景−画像は、当該エンティティの背景に画像を付加するためのものである

つまり、実際に表示されるコンテンツではなく、Webドキュメントのスタイル化効果に使用されます.
Semantic Web , Semantic Tags

https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9

https://developer.mozilla.org/en-US/docs/Web/HTML/Element