즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.
-> 결론적으로 시멘틱 웹은 웹이 단순히 코드로만 구성된 것 이 아니라, 그 안에서 층위와 의미 체계가 있다는 것을 표현한 것이다. 즉, 이를 통해 컴퓨터 내부에서 해석하는 것 뿐만 아니라, 개발자 역시 코드를 통해 웹의 의미를 파악할 수 있는 역할을 한다.
시멘틱 태그는 이 시멘틱 웹이라는 공간을 표현하는 하나의 나무들이다. 즉, 시멘틱 웹을 구성하고 있는 의미 있는 태그들이다. 걀극 우리가 해당 코드를 개별적으로 의미할 수 있도록 도움을 주는 것들의 전부가 시멘틱 태그다.
기존의 HTML로 작성된 문서는 컴퓨터가 의미정보를 해석할 수 있는 메타데이터보다는 사람의 눈으로 보기에 용이한 시각정보에 대한 메타데이터와 자연어로 기술된 문장으로 가득 차 있다. 예를 들어 <em>바나나</em>
는 <em>노란색</em>
이다. 라는 예에서 볼 수 있듯 <em>
이라는 태그는 단지 바나나와 노란색이라는 단어를 강조하기 위해 사용된다. 이 HTML을 받아서 처리하는 기계(컴퓨터)는 바나나라는 개념과 노란색이라는 개념이 어떤 관계를 가지는지 해석할 수 없다. 단지 <em>
태그로 둘러싸인 구절을 다르게 표시하여 시각적으로 강조를 할 뿐이다. 게다가 바나나가 노란색이라는 것을 서술하는 예의 문장은 자연어로 작성되었으며 기계는 단순한 문자열로 해석하여 화면에 표시한다.
시맨틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다. 가장 단순한 형태인 RDF는 <Subject, Predicate, Object>의 트리플 형태로 개념을 표현한다. 위의 예를 트리플로 표현하면 <urn:바나나, urn:색, urn:노랑>과 같이 표현할 수 있다. 이렇게 표현된 트리플을 컴퓨터가 해석하여 urn:바나나 라는 개념은 urn:노랑 이라는 urn:색을 가지고 있다는 개념을 해석하고 처리할 수 있게 된다. 보다 구체적인 예로 다음이 카카오 소유임을 나타내는 트리플은 <http://daum.net, urn:wikipedia-ko:소유, http://kakaocorp.com> 과 같이 된다. 시맨틱 웹은 이러한 트리플 구조에 기반하여 그래프 형태로 의미정보인 온톨로지를 표현한다.
HTML5에서는 시맨틱 웹을 쉽게 구성할수 있도록 만들어주는 요소들이 추가되었는데, 기존에
<div id="header"> 내용 </div>
로만 나타낼수 있던 머리 부분을
<header> 내용 </header>
로 쉽게 더 의미론적으로 나타낼수 있게 되었다.이는 div와 id=header 모두 읽었던 예전 XHTML이나 HTML4보다 훨씬 효율적이라고 볼수 있다.
HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.