시멘틱 웹(Semantic Web)이란?

웹 프론트에 대해 공부를 하다가 시멘틱 웹이라는 단어가 종종 나왔다. 시멘틱 웹이라는 것에 대해서 직감적으로만 알고 있어서 정확한 의미는 무엇인지 찾아 보게 되었다.

 

1. 시멘틱 웹이란?

우선, 시멘틱 웹(Semantic Web)은 해석 그대로 '의미론적인 웹'을 말한다. 그럼 이 '의미론적인 웹'은 무엇일까?

웹에 존재하는 수많은 웹페이지들에 메타 데이터(Meta data)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

 

기존에는 이렇게 나타낼 수 있었지만

<div id="header"> 내용 </div>
<font size="6"><b>Hello</b></font>

현재는 이런식으로 태그를 더 의미적으로 담고 있다.

<header> 내용 </header>
<h1>Hello</h1>

즉, 쉽게 생각하면 막연한 태그를 가진 것이 아닌 확실한 의미를 가진 태그를 사용하고 있는 웹이라고도 할 수 있다.

 

2. 시멘틱 태그의 종류

시맨틱 요소를 활용한 구조

<header>

  웹 문서의 머리글 정의한다.

<hgroup>

  문서의 제목을 그룹화 해준다. 제목과 부제목을 그룹화 시켜준다.

<nav>

  문서나 전체 섹션의 네비게이션 영역을 표현한다. 문서안의 어느위치에든 배치가 가능하다.

<section>

  본문 콘텐트를 담고 있다. 콘텐트를 분류한다.

<article>

  문서에서 독립적인 콘텐트를 나타낸다. 

<footer>

  저작권정보나 제작자 정보가 들어간다.

<aside>

  본문 이외의 내용을 담을 때 사용하거나 광고나 링크를 담을 때 사용한다. 왼쪽이나 오른쪽의 사이드바로 사용한다. 

<figure> <figcaption>

  그림이나 도표, 소스코드 등에 설명 글을 붙일 수 있다.

<Canvas>

  그래픽을 표시합니다