1. Semantic Web

1-1 Semantic의 뜻

시멘틱하다는 것은 '의미가 있다'는 뜻이고, 시멘틱 웹은 검색 엔진에게 유의미한 웹을 일컫는다.

1-2 Semantic Web의 중요성

웹유저들은 원하는 정보에 빠르게 접근하기 위해 구글, 네이버와 같은 검색 엔진들을 이용한다. 그리고 검색 엔진은 유저의 니즈를 만족시키기 위해 시멘틱 HTML 태그를 기준으로 웹사이트를 파악한다. 즉 검색엔진에게 어필하기 위해 시멘틱한 웹사이트를 구성하는 것이 중요하다. 시멘틱한 웹은 검색결과에 자주 등장하게 되므로 유저들이 유입되어 영향력이 커진다는 것을 의미하고, 이는 비즈니스적으로 중요한 의미를 가진다.

1-3 SEO

SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정으로, 검색 랭크 개선이라고도 한다. 검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성한다.

2. Semantic Tag

웹 페이지의 접근성과 SEO(Search Engine Optimization)을 향상시켜주고 코드의 가독성을 높여주는 Semantic HTML 태그. 각 HTML 태그가 포함하는 내용에 대한 정보를 제공한다는 것을 의미한다.

cf. div 태그와 span 태그는 포함되는 내용에 대한 어떠한 정보도 제공하지 못 하기 때문에 시멘틱 태그가 아니다.

3. 웹사이트에 이미지를 넣을 때, img와 div 태그 중 어떤 것을 사용해야 할까?

의견
목적에 따라 다르게 볼 수 있습니다. <img>는 HTML 태그이고, background-image 속성 은 CSS입니다. 검색엔진은 HTML 태그를 기준으로 정보를 분류하여 유저에게 검색결과를 반환합니다. 반면, CSS는 디자인 요소이지 검색엔진에 정보로서의 가치를 제공하지 못합니다.
이러한 관점에서 볼 때, semantic한 웹사이트를 만들고 싶다면 <img>태그를 사용하면 됩니다. 이외 정보 제공이 아닌 단순 디자인 목적이라면 div 태그를 통해 background-image 속성을 사용해도 무방합니다.