[TIL] Semantic Web? Semantic Tag?

Semantic Web

意味は

の意味網で、単純なコードで実現されたサイトではなく、「意味」と「相関性」からなるサイトです.

HTML 5の前に、コードはidまたはclassを使用してレイアウトとスタイル設定を行いましたが、HTML 5 Semantic Webでの表現はより短く、より意味のあるものになります.

[HTML4]
<div id="main">

[HTML5]
<main>

Semantic Tag

Semantic tagは、有意義なWebを作成するために必要な要素であり、ブラウザや開発者にその意味を明確に説明しています.

<無意味で有意義な要素>

non-semantic : <div> and <span>semantic : <form> and <header> ...
HTML5 Semantic tag

<header></header> 문서의 헤더를 설정

<nav></nav> 네비게이션 링크를 정의

<main> 주요 컨텐츠 내용 부분을 지정
  
<section></section> 문서의 일반적인 영역 설정
  
⭐ <section> 안에 <section>을 넣을 수도 있고,
   <actiocle>을 이용해 내용을 넣을 수도 있다.
    
<acticle></acticle> 독립적으로 구분되거나 재사용이 가능한 영역을 설정
    
<footer></footer> 문서의 바닥글을 설정(저작권,작성자 등)

img tag vs background-image

img tag:使用する画像がコンテンツの一部である場合、すなわち有意義なHTMLコンテンツ画像要素を使用する場合(alt属性を使用)
background-image:画像要素が設計や装飾として使用される場合、コンテンツの一部ではありません.
✔imgタグは、画像のロードに失敗した場合の追加要素を属性で表すことができます(検索エンジンに影響します)
✔背景-画像はimgタグと異なり、Google検索などに露出しません.