[HTML] Semantic Web과 Semantic Tag

1. Semantic Web이란?

 

-  의미

 

위키 백과에 검색해보면 시맨틱 웹(Semantic Web)은 아래의 의미를 갖는다고 나온다.

 

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

쉽게 말하면 '의미론적인 웹'이란 말 그대로, 단순히 코드만 나열된 것이 아닌 의미를 지닌 웹이라는 것을 의미한다.

 

-  등장 배경

 

• 시맨틱 웹이 나오기 이전에는 컴퓨터가 스스로 정보를 해석, 가공할 수 없었음

• 웹 기술의 발전으로 무분별하고 방대한 데이터가 쌓임

• 검색 엔진은 사이트의 의미를 정확히 파악하지 못했기 때문에 검색 효율이 떨어짐

• 이러한 배경으로 2001년에 웹 기술의 비전으로 '시맨틱 웹'이 제시되었다.

 

 

 

 

2. HTML5에서의 Semantic Web

 

-  Semantic Tag

 

• 검색 엔진은 모든 웹 페이지에 담긴 HTML 코드를 분석할때 태그에 근거하여 분석을 하게 된다.

• 시맨틱 웹이 도입됨에 따라 검색 엔진의 효율을 높이기 위해

  HTML5에서는 시맨틱 웹을 쉽게 구성할수 있도록 만들어주는 '시맨틱 태그'들이 추가되었다.

• 과거에는 div 태그에 class나 id를 속성으로 넣어서 모든 구역을 표현 했다면

  HTML5에서는 header, footer, nav 등과 같은 태그 자체로만으로도 정보가 담긴 시맨틱 태그들로 대체할 수 있게 되었다.

• HTML5에 추가된 시맨틱 태그

Tag	설명
header	헤더 영역(페이지 상단)을 의미
nav	네비게이션을 의미
aside	사이드에 위치하는 공간을 의미
section	본문의 여러 내용을 포함하는 공간을 의미
article	본문의 주 내용이 들어가는 공간을 의미
footer	푸터 영역(페이지 하단)을 의미

 

** 참고

 

 

 

예시)

<div id="header">
  헤더 영역 입니다
</div>

↓↓↓

<header>
  헤더 영역입니다
</header>

 

 

-  의미에 적합한 태그 사용하기

 

위 예시처럼 <div id="header"> 대신에 시맨틱 태그인 <header>를 사용하듯,

시맨틱 웹을 구현하기 위해서는 시각적으로 똑같이 보이더라도 의미와 맞는 태그를 적절하게 사용하는 것이 중요하다.

예를 들어, 웹에 이미지를 넣는 방법에는 두 가지가 있다.

 

1. <img> 태그를 사용하는 방법

2. <div> 태그에 background-image 속성을 추가하는 방법

 

• 1번 방법으로 이미지를 넣으면 <img> 태그의 alt 속성에 문자열을 넣을 수 있는데,

  이 문자열은 meta 정보가 되어 검색 엔진이 이 문자열을 인식할 수 있게 된다.

• 반면에 2번 방법으로 이미지를 넣으면 해당 이미지는 어떠한 정보도 담고있지 않게 된다.

 

>> 따라서 이미지가 사용자 검색에 노출이 되야하는 경우나 데이터에 유의미한 이미지일 경우 <img> 태그를 이용해서 이미지를 넣어야 시맨틱 웹의 구현에 적합하다.

하지만 단순히 꾸미기 위한 이미지라면, <div> 태그에 background-image 속성으로 이미지를 넣는 것도 하나의 방법이 될 수 있다.