Semantic Web

시맨틱 웹(Semantic Web)은 의미론적인 웹으로 컴퓨터가 이해 할 수 있는 형태로 제작된 웹을 의미합니다.

웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축한다.

웹을 사용하는 유저들은 검색엔진을 사용합니다. 검색엔진에 노출 될 수록 많은 유저들이 그 사이트를 이용할 것이고 그로인해 사이트를 더 키울 수 있습니다. 하지만 검색에 노출되지 않으면 사이트에 접속하는 유저들이 없을 것이며 사이트에 영향력이 없게됩니다.

SEO(검색엔진 최적화: Search Engine Optimization)를 활용 할 때 가장 좋은 방법은 검색엔진이 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작됩니다.

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집합니다. 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스을 만들어 놓습니다.

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 웹사이트의 HTML 코드입니다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 됩니다.

Semantic Tags

시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

시맨틱 태그(Semantic Tags)에서도 Semantic Tags와 Non-Semantic Tags로 나뉩니다.

Semantic Tags
section, header,nav 등이 있으며 이들 태그는 content의 의미를 명확히 설명합니다.

Non-Semantic Tags
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않습니다.

img vs Backgorund-img

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

img코드는 정보가 담긴, 정보를 필요로하는 이미지, 사용자가 선택을 함에 있어 정보를 제공할 수 있는 사진입니다.
그러나 div 태그에 background-imgcss 속성을 부여하는것은 말 그대로 웹페이지 혹은 해당 div 에 디자인을 부여하기 위한 방법으로 특정한 정보를 제공하지 않습니다.

img 태그를 사용했을 경우 background-image 속성을 추가하는 것보다 검색엔진에 더 많이 서칭될 수 있습니다.

위 Semantic web에서 설명했듯이 웹이 조금이라도 더 노출돼야 하고 컨텐츠에 이미지를 사용해야 될 때는 img 사용하고 사이트의 디자인적인 요소들 반복되는 이미지들의 경우에는 background-image를 사용하는 것이 좋습니다.