1.Semantic Web
시멘틱 웹의 시멘틱은 영어단어로 의미의 의미론의라는 뜻을 가지고 있다.
해석하면 의미있는 웹이다.
모든 사람들이 인터넷을 활용하면서 자신의 의견 및 여러 게시글들을 올리게 되었다. sns채널만 해도 게시글이 엄청 많고 이러한 무분별한 정보글들은 도움이 될수 있지만 또다른 문제를 야기 했다.
정보 검색을 하면 컴퓨터가 수많은 정보중 사용자에게 어느 정보를 전달해야 할지 스스로 해석 및 가공을 하지 못하자 사용자가 개입하여 처리하게 되었고 결국, 컴퓨터 등 기계가 읽고 처리할 수 있는 웹을 개발하고자 탄생한 것이 Semantic Web이다.
이러한 시멘틱 웹에 도움을 줄수 있는 것이 바로 시멘틱 태그이다.
2.Semantic Tags
시멘틱 태그는 컴퓨터 뿐만 아니라 사용자에게도 이해하기 쉽게 구성되어 있다.
non-semantic Tag VS semantic Tag
non-semantic Tag
div,span 우리가 자주 쓰는 태그 이며 class, id를 활용하여 변화 무쌍하게 종류를 지정해줄수가 있다. 이들은 아무런 내용 없는 non-semantic tag 이다. 무분별한 정보의 게시글처럼 어디에서나 쓰이며 class, id값들도 사용자들 마음대로 입력해놓기 때문에 컴퓨터 및 기계 입장에서는 이해하는데 어려움이 따른다.
Semantic Tag
img, article, aside, footer, header, main, nav, section 등 성격에 따라 다르게 쓰이는 태그들이 등장한다
각자 고유한 성격과 양식을 지녔으며 사용자들이 이해하기에도 그리 어렵지 않다.
또한 가장 큰 장점은 기계가 이것들을 이해하며 정보들을 효과적으로 받아 들일 수 있게 되었으며 이를 통해 우리는 효과적인 검색을 할수가 있게 되었다.
non-semantic Tag VS semantic Tag 사례
img vs div backgroung-image
간단한 예시를 통해서 우리는 시멘틱 태그를 쉽게 이해할수 있다.
img는 Semantic Tag이며 div class = "img" 는 non-semantic Tag이다. 하지만 우리는 같은 역할을 하도록 지정할수 있다.
하지만 img의 양식 중 alt 양식이 있는데 이 양식을 통해 문자를 삽입할수 있다. alt속성에 작성된 문자열은 meta정보가 되며, 검색엔진은 alt속성에 지정된 문자열을 인식하게 된다. 반면 div는 이미지만 삽입하게 되며 삽입된 이미지는 img 태그와 비슷하게 작동 되겠지만 기계는 유의미한 정보를 얻어내지 못한다.
따라서 우리의 정보가 검색에 노출되기 원한다면 img태그를, 이미지를 삽입함으로 꾸미고 싶다면 div를 사용하면 된다.
결론, 기계(컴퓨터)가 쉽게 이해하고 컴퓨터에게 유의미한 정보를 주고 싶다면 , 또는 검색에 노출되고 싶다면 시멘틱 태그를 사용하자.
