Semantic Web & Sematic Tag의 이해

sanha_OvO·2021년 11월 2일
0

Frontend

목록 보기
1/7

Semantic Web

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

위키백과

풀어쓰면 Semantic Web은 각 요소들과 그 관계가 의미를 가지도록 하여 컴퓨터가 쉽게 읽고 가공할 수 있도록 한다는 것이다.

이는 Sematic tag와 같은 요소들이 검색엔진 노출에 관한 효율성을 증대시켜 주는 효과를 주기도 한다 (검색엔진의 최적화).


그럼 Semantic tag는 뭘까?

이전 버전 HTML에서 HTML5로 넘어오면서, header, nav, footer와 같은 태그들이 추가됬는데, 어떤 공통점을 가지고 있을까?

이들의 공통점은 div와 같은 태그와 달리 태그 그 자체만으로도 해당 태그의 의미를 알 수 있다는 것이다.

예시를 들어보겠다.
img 태그를 이용해 불러온 이미지와 css의 background-image를 이용해 불러온 이미지가 있다고 치자.

<img alt="안녕" src="location.jpg">

<div style="background-image: url('location.jpg')">
  • img태그를 이용하여 이미지를 불러올 때 인라인으로 작성된 어트리뷰트(Attribute)를 함께 불러온다. 즉, 해당 img태그가 불러온 이미지에 마우스 커서를 올리는 경우나 이미지에 에러가 발생해 불러오지 못한 경우 alt값과 같은 정보가 브라우저 상에 보여진다.

  • 반대로 background-image를 이용하여 이미지를 불러오는 것은 그에 대한 정보를 같이 불러오지 않기 때문에 정보를 보여주지 않는다. 즉, 단순히 디자인적인 요소를 위해 사용되어 지는 방법이라고 할 수 있겠다.

위에서 말한 검색엔진의 최적화 역시 이에 영향을 미치게 되는데, alt값이 '안녕'으로 저장 되어 있기 때문에 검색엔진에서 img 태그를 이용한 이미지는 안녕'에 관한 검색 결과에 뜨지만 background-image를 이용하면 검색엔진에 노출이 되지 않는다.

profile
Web Developer / Composer

0개의 댓글