Semantic Web과 Semantic Tag

김재도·2022년 3월 2일

1. Semantic Web 이란?

Semantic Web의 사전적 의미는 의미론적인 웹이다. 이는 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 시맨틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다.

Semantic Web 구성요소

  • RDF(resouce Description Framework): 웹상의 메타데이터의 표현과 교환을 위한 프레임워크
  • XML(eXtensible Markup Language): 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지, 대표적인 것이 HTML 이다.
  • Ontology: 특정 지식과 관련된 용어 사이의 관계 정의
  • Agent: 사용자의 역활을 대행하여 지능적, 자율적 임무수행.

2. Semantic Tag 란?

과거 무분별한 태그의 사용으로 인해 정보를 찾기 위해 사람이 직접 개입해야 하는 비효율적인 시스템을 개선하고자, 의미있는 태그들을 개발하기 시작했다. 그 태그들이 바로 시맨틱 태그이다.

Semantic Tag 미사용

<div style="font-size: 2em; font-weight: bolder">>
Title
</div>

Semantic Tag 사용

<header>
<h1>Title</h1>
</header>

div 태그는 content에 대한 어떤 설명도 없다. 반대로 Semantic Tag인
Header, h1 등은 content의 의미를 명확하게 설명하고 있는것을 볼 수 있다.

non-Semantic Tag와 Semantic Tag의 차이

Semantic Tag를 사용하는 이유

효과적인 검색 가능

  • 의미가 존재하는 태그들을 사용함으로서, 기계는 정보들을 효과적으로 인식할 수 있게 된다.
  • 태그의 의미를 통해서 더욱 더 정확한 정보 전달이 가능하게 되었고, 서로간에도 훨씩 인식하기 용이하게 되었다.

3.Semantic Tag 사용 예시

img vs background-image

img는 의미를 설명하고 있는 Semantic Tag이지만 background-image를 사용하는 div태그는 non-Semantic Tag이다.

  • img 태그
  1. 내 이미지가 사용자의 검색에 노출되어야 할 때 사용한다.
  2. img태그는 html에서 사용시에 alt속성에 문자열을 넣을 수 있다. alt속성에 작성된 문자열은 meta정보가 되며, 검색엔진은 alt속성에 지정된 문자열을 인식하게 된다.
  3. 콘텐츠 정보와 연관이 있는 이미지를 쓸 때 사용한다.
  4. 중요한 의미가 내포된 이미지를 쓸 때 사용한다.
  5. 페이지 프린트시 이미지가 함께 나오도록 할 때 사용한다.
  • background-img
  1. 단순한 이미지 첨부일 뿐, 어떠한 정보도 담지 않는다.
  2. 이미지가 콘텐츠의 일부가 아닐 때 사용한다.
  3. 페이지 프린트시 이미지가 나오지 않게 할 때 사용한다.

reference

https://fierycoding.tistory.com/55
https://velog.io/@j-jhoo/Semantic-Web%EA%B3%BC-Semantic-Tag%EC%B0%A8%EC%9D%B4
https://velog.io/@geonoo99/Semantic-Web-%EA%B3%BC-Semantic-Tag-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

profile
프론트엔드 개발자입니다.

0개의 댓글