Semantic Web

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻 - 위키백과

Sementic Web

웹상에 축적된 정보가 방대해 짐에 따라 정보 검색 시 무수히 많은 불필요한 정보가 돌출하여 정보 홍수를 가중시키게 되었다.

이러한 정보 홍수에서 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리하여야 하는 문제가 생기게 되었다.

 

시맨틱 웹은 이러한 문제를 해결하기 위해 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용 등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만들기 위해 나타났다.

 

즉, 사람만이 웹에 산재한 정보의 의미를 파악하는 것이 아닌, 자동화된 기계가 해석할 수 있는 일종의 표준 의미정보 교환의 수단이 되는 것이 시맨틱 웹의 목적이다.

---

Sementic Tag

검색엔진은 웹사이트의 HTML코드를 통해 인덱스를 생성할 때 필요한 정보를 수집하는데, HTML 문서에는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다.

인덱싱: 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)를 만드는 것

 

Semantic Tag는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 하여 가독성을 높이고, 유지보수를 용이하게 한다.

 

출처:https://velog.io/@ingdaeho/Semantic-Web-and-Tags

<!-- 1 -->
<span style="font-size: 2em; font-weight: bold">Hi!</span>
<h1>Hi!</h1>

<!-- 2 -->
<b>This text is bold.</b>
<strong>This text is bold.</strong>

<!-- 3 -->
<i>This text is italic.</i>
<em>This text is italic.</em> <!-- emphasize -->

위의 예에서 보다시피, 위아래 줄 코드 모두 결과물은 같지만 위의 줄은 의미가 없는 문자열인 반면 아래줄은 의미를 가진 Tag들을 사용하고 있다.

 

1번의 예에서는 아래줄에 (header)라는 의미를 내포하고 있는 <h1>태그를 사용하고 있다.

눈에 보이는 결과물은 같지만 브라우저 안에서 검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다.

 

또다른 예로는 img태그의 사용시와 css에서 background-image속성 사용시의 차이를 들 수 있다.

img태그 사용 시와 css에서 background-image속성 사용 시의 차이점

 

non-semantic tag

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

 

semantic tag

   form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.

---

참고

poiemaweb.com/html5-semantic-web

Semantic Web | PoiemaWeb

ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9

시맨틱 웹 - 위키백과, 우리 모두의 백과사전