시맨틱 웹, 시맨틱 태그(Sementic Web, Sementic Tags)

시맨틱 웹(Sementic Web)

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

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

시맨틱 태그(Sementic Tags)

시맨틱 태그는 브라우저와 개발자 모두에게 의미를 명확하게 설명한다.

• non - sementic 요소 : div, span 등이 있으며, 이들 태그는 content에 대하여 어떠한 설명도 포함하지 않는다.
• sementic 요소 : form, table, img 등이 있으며, 이들 태그는 content에 의미를 명확히 설명한다.

non-sementic 요소를 사용하는 것과 sementic 요소를 사용하는 것의 차이점

예를 들어 사이트에 이미지를 넣는데, img 태그를 사용하는 것과, div 태그에 background-image 속성을 추가하는 것 두 가지의 차이점은 무엇일까?
첫 번째로 img 태그를 사용하게 되면 브라우저와 개발자 모두에게 content에 대한 의미를 명확하게 설명한다. 브라우저는 자동화된 기계(컴퓨터)가 정보를 수집하고 활용하는데 용이해지며, 개발자에게는 코드의 가독성을 높여 유지보수가 편리해진다.

<img class="css" alt="css" src=" https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-512.png"

두 번째로 div 태그를 사용하게 될 경우, content에 대한 어떠한 설명도 포함하지 않고 있기 때문에, 브라우저는 정보를 수집하기 어렵고, 개발자에게는 코드의 가독성을 떨어트려 유지보수가 힘들어진다.

<div class="bg-img"></div>

.bg-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  height: 300px;
  width: 300px;
  background-size: 100%;
}