Semantic web / Semantic tag

Lets_go jae·2020년 8월 20일
0

시멘틱 웹이란

시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다. (물론 사람도 이해할 수 있습니다.)

  • Wiki 백과

사용자들이 생산하는 정보둘이 너무 많아졌고 유익한 정보도 말고 불피요한 정보들이 넘쳐나기 시작 되었습니다.
사람들이 일일이 수 많은 정보들을 자신이 필요한 정보를 찾아야 하는 문제점이 생기게 됩니다.

이런한 문제점을 해결하기 위해 "시맨틱 웹"이라는 개념이 되었고, 웹의 창시자인 '팀 버너스 리'가 제안했습니다.

웹 사이트에 대한 설명을 넣을 때 에 직접 웹사이트에 대한 설명을 넣는 것 외에는 방법이 없었습니다. 하지만 지금은 태그를 이용해 다양한 설명과 이지미 등을 지정할 수 있게 되면서 웹 문서에 담을 수 있는 정보들이 늘어났습니다.

시맨틱 웹은 여기에서 한 단계 더 나아간 방식입니다. 웹 문서에 더 많은 정보들을 담을 수 있고, 웹 문서를 크롤링해가는 검색 엔진 로봇들에게 더 많은 정보를 알려줍니다.

과거에는

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

현재에는

<header></header>

시멘틱 태그란

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

예를 들어 div 태그는 non-semantic 태그라고 할 수 있고
table, article 등의 태그는 semantic 태그라고 볼 수 있다.
일반적으로 div 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없다.

table, article 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다. table 태그 안에는 표가 들어갈 것이고,
article 태그 안에는 어떤 형태의 글이든 글이 들어갈 것이라는 것 정도는 유추 할수 있다.
이전의 html에서 header나 footer를 표현하기 위해 아래와 같이 div 태그를 사용하여

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

<div class="header"> 
<div id="footer">

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

<header>
<footer>

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

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

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

시맨틱 태그의 기본적이 구성

0개의 댓글