Semantic Web 이란?

의미론적인 웹

시맨틱웹(Semantic Web)은 말그대로 웹사이트가 단순한 코드들의 구성이 아닌, 웹사이트 자체가 의미를 가진다는 뜻이다.
예를 들어 우리가 신문이나 인터넷기사들을 접할때, 우리는 어떤부분이 기사의 제목인지 굳이 누군가 설명해주지 않아도 한눈에 알아볼 수 있다. 또 기사에 실린 이미지나 전체적인 내용이 어떤부분인지도 쉽게 알 수있다.
그 이유는 우리는 뉴스기사가 어떠한 구조로 작성되고, 또 우리한테 어떻게 전달되는지 학습되어 있기 때문이다.

이처럼 사람의 머리 속의 언어에 대한 이해를 컴퓨터 언어로 표현하고, 이것을 컴퓨터가 사용할 수 있게 만든 웹을 시맨틱웹(Semantic Web)이라고 한다.

시맨틱 웹의 이상향은, 인터넷에 방대한양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확하게 얻을 수 있는것이다.

Semantic tag

이전에 설명한 시맨틱웹(Semantic Web)의 구현을위해 HTML5 태그에 의미를 부여한 태그를 시맨틱 태그(Semantic tag)라고 한다.
시맨틱태그를 사용하면 개발자는 물론, 개발지식이 없는 사람도 어느정도 태그가 웹의 어디에 위치해있는지 쉽게 알 수 있다. 또한 각 태그가 어떠한 의미를 가지고 있는지도 쉽게 알 수 있다.

시맨틱 태그(Semantic tag)의 종류

<header> 	# 페이지 상단이나 섹션의 머리말
  
<nav>		# 문서의 네비게이션, 메뉴 항목을 정의
  
<section> 	# 문서의 구획들을 정의

<main>		# 문서의 주가 되는 컨텐츠 정의
 
<img>		# 이미지

등이 있다.

예제

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

그렇다면 우리는 이 질문에 어떻게 답할 수 있을까?

우리는 시맨틱 태그(Semantic tag)가 의미를 가지고 있는 태그란 것을 알고 있다. 또한 시맨틱 태그를 활용하여 만들어진 시맨틱 웹은 인터넷상에서 컴퓨터가 데이터를 자동으로 해석해 사용자에게 정확한 결과를 전달해줄 수 있도록 해준다.

그러므로 정보가 담긴 이미지를 사용하여 웹이 검색엔진에 잘 노출될 수 있게하거나, <img> 태그의 alt 속성을 사용하여 이미지가 깨져도 이미지에 대한 정보가 남아있게하려면 <img> 태그를 사용하는게 좋을 것이다. 그게 아닌 단순한 외관이나 미적용도로 이미지를 사용하려면 background-image를 사용하는게 좋을 것이다.