Semantic Web 과 Semantic Tag

Semantic Web?

웹 기술이 발달함에 따라 세상에는 수많은 웹이 생겨났고, 그 웹이 담고 있는 데이터의 양 또한 방대해졌습니다.

그러나 웹상에 정보가 방대해짐에 따라 생겨나는 문제들이 있었습니다.

웹 기술은 축적된 방대한 데이터에 대하여 키워드에 의한 정보 접근만을 허용하고 있기 때문에

정보 검색 시 무수히 많은 불필요한 데이터가 노출되게 됩니다.

컴퓨터가 알아서 중요한 정보를 필터링할 수 있는 방법이 없어서, 사용자가 직접 그것들을 처리해줘야하는 문제가 발생합니다.

이러한 문제의 근본은 컴퓨터가 웹에 있는 데이터가 가지는 의미를 이해하지 못하는 데 있습니다.

시멘틱 웹은 이런 문제점들을 해결하기 위한 것으로, 컴퓨터가 잘 이해할 수 있는 잘 정의된 의미를 가진 데이터를 기반으로 하여

컴퓨터와 사람이 모두 잘 이해할 수 있는 웹을 만드는 것을 목표로 합니다.

Semantic Tag

A semantic element clearly describes its meaning to both the browser and the developer.

시맨틱 태그는 사람과 컴퓨터, 양 쪽 모두에게 의미를 가진 태그를 의미합니다.

Semantic 하지 않은 태그의 예로 div, span 이 있고, semantic한 태그의 예로 section, header, nav 등이 있습니다.

예제를 가져왔습니다!

<div class="header"></div>
<header></header>

두 태그는 기능상 차이는 없지만 header 태그는 우리가 딱 봤을 때 웹의 헤더 부분에 해당하겠다는 의미가 전달이 되죠

이런식으로 header태그를 사용해주면 기계도 이 태그가 있는 곳이 헤더라는 것을 이해합니다.

예제 하나 더 갑니다!

<img src="sample.jpg" />
<div class="div-img"></div>
<style>
  .div-img {
    background-img: url('sample.jpg');
    width: ...;
  }
</style>

위 예제에서 div와 img태그는 둘 다 이미지를 보여주도록 되어있습니다.

하지만 img태그는 이미지를 보여주겠다는 의미가 명확하게 전달이 되죠!

또 img 태그에 alt와 같은 어트리뷰트를 주어 부가적인 설명도 더할 수 있겠고요~

이런식으로 시맨틱 태그를 사용하면 시맨틱 웹의 목표를 향해 가까이 갈 수 있겠습니다.