1.Semantic Web

시맨틱 웹의 근본적인 필요성은 컴퓨터에게 웹 상의 정보를 쉽게 이해시키는 점에 있다. 단순히 웹 상에서 축적된 정보로만 남았던 웹페이지들을 ‘의미’와 ‘관련성’으로서 연관 지으면서 인간과 컴퓨터 모두 잘 이해할 수 있는 웹으로 만들고자 함에 있다. 그 과정에서 웹 페이지의 정보에 대한 추출, 해석, 가공이 용이해졌다.

1-1. Semantic Tag

시맨틱 태그는 HTML5에 도입된 태그로서 시맨틱 웹의 발전 과정과 맞물려 있다. HTML5 이전엔 < div >란 의미가 없는 태그를 통해 특정 정보를 묶었다. 때문에 < div >는 non-semantic 태그다. < div >태그만으로는 들어간 내용의 의미를 알 수 없다.
그러나 시맨틱 태그가 나온 이후 태그 안에 들어가는 내용의 의미를 쉽게 유추할 수 있다. 가령 < table >에는 표가 들어간다는 점을 알 수 있고, < article >에는 특정 형태의 글이 들어간다는 점을 유추할 수 있다. 즉 검색엔진이 html 파일을 분석할 때 컨텐츠의 유형을 빠르게 식별할 수 있게 된 것이다.

1-2. 유용한 시맨틱 태그

< header > : 화면 상단에 위치하며 보통 로고, 로그인, 회원가입 등을 포함합니다.
< nav > : 보통 < header > 영역의 아래쪽에 위치하며 메뉴를 표현할 수 있습니다.
< section > : 하나의 주제를 그룹화할 때 사용합니다. (ex 뉴스 기사의 제목)
< article > : 하나의 주제에 대해서 그 내용에 대해 설명할 떄 사용합니다. (ex 뉴스 기사, 블로그 글)
< aside > : 흔히 사이드바라고 불리는 곳으로 보통 광고, 검색 기능, 카테고리 등을 표현합니다.
< footer > : 화면 하단에 위치하며 보통 이메일, 저작권 표시 등을 표현합니다.

2. img vs div의 background-image

시맨틱 태그인 img>는 검색엔진 입장에선 최적화된 태그다. alt=""를 통해서 이미지에 대한 간략한 정보도 표시할 수 있다. 이미지 자체가 콘텐츠로서 중요할 경우 사용하면 좋다.

반면 < div > 태그 속의 이미지는 검색엔진에서 크롤링하거나 색인을 생성하지 않는다. 때문에 이미지 자체가 중요하다기 보다 페이지의 장식으로서 역할이 중요할 때 유용하다. 그리고 css를 통해서 유지와 보수를 좀 더 쉽게할 수 있다. ex) 이미지의 일정부분만 보여줄 때, 이미지 위에 텍스트가 들어갈 때, 특정 상황에서 이미지 제거나 수정이 잦은 경우 등