[TIL] #7. Semantic Web, Semantic Tag

Semantic Web, Semantic Tag

---

정의

시맨틱 웹(Semantic Web)을 직역하면 '의미론적인 웹'이다. 웹이 의미론적으로 구성되어 있는 것을 말하는데 위키백과의 정의를 보면 다음과 같이 나와있다.

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

컴퓨터는 어떤 정보가 있을때 그 정보의 의미를 해석할 수 없다. 예를 들어, "바나나", "노란색"이라는 문자열 데이터가 있을때 컴퓨터는 문자열 그대로 "바나나", "노란색"이라고 인식하여 처리할 뿐, 이것이 과일인지 채소인지 두 데이터간 어떤 의미 관계를 가지고 있는지 알 수 없다. 단지, 문자의 조합으로 이루어진 문자열로만 인식한다. 시맨틱 웹은 어떤 방식을 통해 이런 데이터 간 의미 관계를 명시하여 컴퓨터가 데이터들 간 의미 관계를 해석할 수 있도록 구축한 웹을 말한다.

HTML5 에서는 Semantic Tag를 사용하여 웹을 구성함으로써, Semantic Web을 표현할 수 있다.

HTML에서의 Semantic Web

HTML에서 이미지를 삽입할 때 div태그를 사용할 수도 있고 img 태그를 사용해서 삽입할 수 도 있다.

div 태그를 사용했을 때

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

html파일에 위와 같이 작성하고

.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");
}

위와 같은 CSS파일을 작성하면

이렇게 나온다!

img 태그를 사용했을 때

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png">

이렇게 해도 똑같은 결과가 나온다!

차이점

div 를 사용하든 img 를 사용하든 웹 브라우저에서는 동일한 결과를 볼 수 있다. 하지만 div 의 경우 태그 자체만으로 어떤 컨텐츠를 보여주려고 하는지 알 수 없다. (span 태그도 마찬가지!!)반면에, img 의 경우, 이미 태그 자체에서 어떤 콘텐츠를 보여주려고 하는지 알 수 있다. table , h1 , ul , ol 등의 태그도 각 태그의 컨텐츠가 어떤것인지 태그 자체만으로도 알 수 있다. 이와 같은 태그들을 semantic tag라고 하며 HTML5에서는 새로운 semantic tag들이 추가되었다.

HTML5에 추가된 Sematic 마크업

• header : 문서의 머릿말로 전체적인 정보를 포함하는 내용. 일반적으로 제목 요소(h1~h6), 저자 정보, 로고 등을 포함.
• nav : 탐색 링크의 집합. 예를 들면 메뉴바.
• section : 일반적으로 제목이 있는 주제별 콘텐츠.
• article : 독립성을 가지는 콘텐츠. 이것만으로 배포가 가능해야함. 예를 들면, 신문 기사, 블로그 포스트...
• aside : 사이드 바의 역할.
• footer : 문서의 꼬릿말.

그 외에도 details, time , main , figure 등이 있다. 자세한 내용은 w3c 페이지 참고.