Semantic Web

문서에 의미에 맞게 구성된 웹
웹의 규모가 점점 커지고 정보의 양이 많아지면서 HTML5에서는 기계가 사람 대신 웹 페이지의 정보를 이해하고 처리해준다

과거 방식

<div id="header"></div>

Semantic Web

<header></header>

이전에는 id명을 header로 지정해도 이 부분이 헤더의 영역인지 기계가 알수 없었지만
<header>라는 태그를 사용하여 기계가 이 부분을 헤더 영역으로 이해할 수 있게 되었다.

Semantic Tag

<div>, <span>과 같은 태그는 non-semantic 태그
<section>,<article>등의 태그는 semantic 태그이다.
semantic Tag는 웹 접근성이 높아질 뿐 아니라 검색엔진 최적화(SEO)에도 영향을 준다

img vs div background-image

<img src="" alt="">

img 태그는 우선 alt속성에 문자열을 작성할수 있고 이것이 meta정보가 된다.
검색엔진은 alt속성의 문자열을 인식한다. (SEO에 유리!)
이미지 로드에 실패하더라도 broken image와 alt 텍스트가 대체된다.

div태그의 background-image속성의 경우 이미지 첨부만 될 뿐, 어떤 정보도 담기지 않는다.

이미지가 사용자에게 컨텐츠 이해에 도움이 되고 검색에 노출이 되야한다면 <img>태그
순수 디자인의 위한 코드라면 div background-image 속성