TIL | Semantic Web& Semantic Tag?

💡 Semantic Webとは?

-「語義網」という意味で、人や機械が理解できる形で作られた網です.
👉 コンピュータは、人間の代わりに情報を読み、理解し、加工し、新しい情報を生成することができる.
👉 情報を分析することにより,情報の関係から有意義な資料を抽出し,Web上に展示する.

💡 Semantic Tagとは?

-コンテンツの意味をブラウザ、検索エンジン、および開発者に明確に説明する役割のラベル.

HTML要素には非意味要素と意味要素があります。

#non-semantic 요소
div, span 등이 있으며 이 태그들은 content에 대하여 어떤 설명도 하지 않는다.

#semantic 요소
form, table, img 등이 있으며 이 태그들은 content의 의미를 명확히 설명한다.

<例1>

<font size="6"><b>Hello</b></font>    #non-semantic
<h1>Hello</h1>                        #semantic 

👉 最初の行の要素は意味的に何の意味もありません.
👉 しかし,2行目の要素はヘッダ(タイトル)に最上位の意味を含んでいるため,開発者が意図する要素の意味が明確に示されている.
<例2>

タグと背景-画像属性の違い

#img태그
<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

👉 imgラベルのプロパティはwidth、heightがあり、htmlで直接変更できます.
👉 しかし欠点はメンテナンスしやすいことです.

#background-image속성
<div class="bg-img">배경이미지</div>

.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}

👉 .bg-imgレベルのサイズで、バックグラウンドカラー(background-color)とバックグラウンド画像(background-image)が適用されます.
👉 <div>タグに何も入っていなければwidthの値はないので何も露出しません.
👉 しかしcssにwidthとheightを適用すると、ラベルに何も入っていなくても背景色や背景画像が露出します.
👉 background-size: 00%;プロパティを使用すると、divの指定サイズ内で背景サイズを変更できます.

HTML 5のシンボルマーク

-<header>ヘッダー
-つまり<nav>ナビゲーション
−<aside>側に位置する空間を意味する.
-<section>は、本明細書の複数のコンテンツ(article)を含む空間を意味する
-<article>節の主な内容が入る空間を意味する
-<footer>プト