Semantic Web / Semantic Tag

sing sang song·2021년 9월 2일
0

HTML

목록 보기
1/1
post-thumbnail

1. Semantic Web

Semantic Web이란 무엇인가?

시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다.

현재의 컴퓨터처럼 사람이 마우스나 키보드를 이용해 원하는 정보를 찾아 눈으로 보고 이해하는 웹이 아니라, 컴퓨터가 이해할 수 있는 웹을 말한다. 즉 사람이 읽고 해석하기에 편리하게 설계되어 있는 현재의 웹 대신에 컴퓨터가 이해할 수 있는 형태의 새로운 언어로 표현해 기계들끼리 서로 의사소통을 할 수 있는 지능형 웹이다.
원리는 사람들이 이해할 수 있도록 자연어 위주로 되어 있는 현재의 웹 문서와 달리, 정보 자원들 사이에 연결되어 있는 의미를 컴퓨터가 이해할 수 있는 형태의 언어로 바꾸는 것이다. 이렇게 되면 컴퓨터가 정보 자원의 뜻을 해석 하고, 기계들끼리 서로 정보를 주고받으면서 자체적으로 필요한 일을 처리하는 것이 가능해진다.
2004년 현재 시맨틱 웹과 관련된 연구는 RDF(Resource Description Framework)를 기반으로 한 온톨로지 기술과 국제표준화기구(ISO) 중심의 토픽 맵(Topic Map) 기술이 주류를 이루고 있다. 전자는 현재의 웹에 자원(주 어)·속성(술어)·속성값(목적어) 등 자원을 기술하는 언어인 메타데이터를 부여해 정보의 의미를 이해하고 처리할 수 있게 하는 기술이다. 후자는 ISO의 XML 기반 표준 기술언어인 XTM을 이용해 정보와 지식의 분산관리를 지원하는 기술로, 지식층과 정보층의 이중 구조를 띤다.

시맨틱 웹이 실현되면 컴퓨터가 자동으로 정보를 처리할 수 있어 정보 시스템의 생산성과 효율성이 극대화된다. 컴퓨터 혼자 전자상거래를 할 수 있고, 기업의 시스템 통합(SI), 지능형 로봇 시스템, 의료 정보화 등 다양한 분야에 응용할 수 있다. 웹의 창시자인 팀버너스리가 1998년 제안했으며, 현재는 W3C에 의해 표준화 작업이 진행 중이다.
[네이버 지식백과] 시맨틱 웹 [Semantic Web] (손에 잡히는 IT 시사용어, 2008.02.01)


Semantic Web 예시

내가 만든 웹사이트, 웹페이지를 검색엔진에 노출시키려 한다.
아래 html 의 2가지 타입의 코드가 있다. 예시 1과 예시 2는 브라우저에서 동일한 외형을 가진다.

두 예시 중 어느 예시가 검색엔진에서 웹 문서의 중요한 제목으로 인식하고 인덱스에 포함시켜 검색엔진에 노출시키게 될까?

<!--예시 1-->
<font size="6"><b>how to get informations from data</b></font>

<!--예시 2-->
<h1>how to get informations from data</h1>
정답은 예시 2 이다.

예시 1의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다. 즉, 의도가 명확하지 않다. 개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 다만 폰트 크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다.

그러나 예시 2의 요소는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

다른 예시를 또 들어보자.

<!--예시 1-->
<div>
  프론트엔드 병아리 개발자 개스코인 입니다.
</div>

<!--예시 2-->
<p>
  프론트엔드 병아리 개발자 개스코인 입니다.
</p>
예시 2가 의미가 제대로 전달됨은 물론이다.

프론트엔드 개발자에게 있어서 마크업 구조를 시맨틱 하게 짜는 것은 매우 중요한 요소이다.

물론, 디자인시안 처럼 똑같이 마크업을 짜는 것도 무척 중요하지만 우리는 웹을 그저 시각적 형태로만 볼것이 아니라, 데이터들을 보여주는 것이므로 이러한 마크업을 짤 때, 시맨틱 웹 개념을 생각하며 의미론적으로 마크업 구조를 짜야 하고 태그들을 적절한 상황에 맞게 사용해야 한다.

출처 : 링크


Semantic Tag

HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.

일반적으로 <div> 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없다.

반면, <table>, <article> 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다.

<table> 태그 안에는 표가 들어갈 것이고, 

<article> 태그 안에는 어떤 형태의 글이든 글이 들어갈 것이라는 것 정도는 유추 할수 있다.



좀 더 자세히 살펴보면,

이전의 html에서 header나 footer를 표현하기 위해 아래와 같이 <div> 태그를 사용하여

개발자들이 자유롭게 class명이나 id를 정의하였다면,

<div class="header"> 

<div id="footer">



HTML5에서는 아래와 같이 미리 정의된 태그를 사용하게 된다.

<header>

<footer>



둘의 차이점은

<div> 태그 안의 이름은 개발자 마음대로 정의할 수 있기 때문에

헤더 정보 표현을 위해 <div class='head'> <div class='hd'> <div class='hdr'> 등 여러 방법으로 표현이 가능하지만,

HTML5에서는 시맨틱 태그를 제공하여 HTML태그의 의미를 명확하게 할 수 있다는 것이다.

이렇게 의미를 가지는 태그가 시맨틱 태그이고,

HTML5은 새로운 시맨틱 태그들을 제공한다.

HTML5에서 새로 제공하는 시맨틱 태그들

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

왜 시맨틱 태그를 사용해야 하는가?

기존에는 <div> 태그 안에 id나 class 속성으로 개발자별로 각자 이름을 지정하였기 때문에,

검색엔진이 html 파일을 분석할 때 정확하게 컨텐츠를 식별하기가 힘들었다.

HTML5에서는 정해진 시맨틱 태그를 사용하기로 규약을 정한 거라고 보면 될 것 같다.

출처: https://hianna.tistory.com/278 [어제 오늘 내일]

** 더많은 Semantic elements에 대한 정보 : 클릭

profile
세상을 선명하게

0개의 댓글