Semantic Web이란?
먼저 Semantic의 뜻은 언어 요소간 의미 사이의 관계를 파악하는 것 정도로 정리할 수 있다.
좀 더 쉽게는, 사용하는 단어의 의미를 파악하는 것으로 설명할 수 있고
Semantic Web이라는 것은 웹상에 있는 데이터를 기계가 읽을 수 있게(의미를 파악할 수 있게) 하기 위한 작업이라고 볼 수 있다.
Semantic Web의 목적과 사용 이유
인터넷의 사용이 폭발적으로 늘어남에 따라서 인터넷 상의 웹사이트들도 폭발적으로 늘어났다. 우리는 원하는 웹사이트를 찾기 위해 보통 검색엔진(구글, 네이버)을 사용한다. 이 때 검색엔진은 정보들을 취합해서 의미 있는 정보들을 검색결과로 내놓게 되는데, 정보를 취합하는 과정에서 이 웹사이트가 어떤 정보를 가지고 있는지 파악하는 작업을 거치게 된다.
이것을 반대로 생각하면, 나의 웹사이트를 검색엔진이 잘 읽게하기 위해서는 검색엔진 최적화(SEO)를 하게 되는데 이 때 Semantic Web을 고려한 Semantic Tag를 사용할 수 있고, Tag를 사용하는 HTML에 적용된다는 것을 알 수 있다.
즉, Semantic Web을 잘 구현하기 위해서는 HTML상에 Semantic Tag를 포함하여 검색엔진이 정보를 직관적으로 읽을 수 있게 디자인해야 한다.
Semantic Tag
이제 Semantic Tag라는 개념이 등장했는데, 이 개념은 HTML5부터 등장했다.
HTML5 이전에는 header를 표현하기 위해 <div class="header">를 사용했는데, HTML5에서는 div를 사용하지 않고 이 부분이 header임을 나타내기 위해 <header>라는 직관적인 태그를 사용하는것을 권장한다.
Semantic Tag를 이용하면, <div>로 가득찬 문서보다는 <section>, <footer> 처럼 검색엔진이 직관적으로 정보를 습득하는것이 가능하고, 개발자들이 보기에도 가독성 높은 코드로 보이는 장점이 있다.
면접에서 자주 나오는 질문
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
나의 웹페이지를 Semantic Web으로 만들고 싶다면, 이미지를 넣을 땐 <img> 태그를 사용하여 이미지를 넣는 것이 바람직하다. 이유는, 검색엔진이 이미지를 읽을 때, 바로 이미지인 것을 파악할 수 있고, <div> 태그에는 사용할 수 없는 여러 속성들을 통해 이미지에 대한 많은 정보를 더 담을 수 있기 때문이다.
반대로 이미지를 정보를 담는 것이 아닌 그저 데코의 용도로 사용한다면, <div> 태그에 background-image를 사용하는 것이 더 바람직하다. 이유는, <img> 태그보다 이미지를 자유롭게 처리할 수 있는 장점이 있기 때문인데, <div>의 background로 이미지를 설정했기 때문에, background-size 등의 다양한 파생 요소들을 이용할 수 있기 때문이다.
