Semantic(adj) : 의미의, 의미론적인
위 그림처럼 Layout을 구현한다고 해보자.
바로 떠오르는 방법은 css의 float 속성을 이용, div tag로 4개의 영역으로 구성하는 방법이다.
non-semantic tag를 이용하여 layout을 구성한 것이다.
non-semantic tag 란 무엇일까?
layout을 구성할 때 우리는 위 그림처럼 "제목 영역, link 영역, 내용 영역, 페이지 하단 영역" 으로 의미를 부여하여 나눌 것이다. 하지만 우리가 사용하는 tag는 div 하나이다. 의미를 구분하기 위해 id나 class 를 부여할 수 있겠으나 사용하는 tag는 div 뿐인 것이다. html을 실행하는 기계 입장에선 div는 layout 용 외엔 아무 의미도 없는 것이다.
semantic tag란 의미를 갖는 tag를 말한다.
위 layout을 div 대신 header, nav, session, article, footer tag를 사용, 개발자는 물론 기계도 의미를 이해할 수 있도록 할 수 있다.
아래에는 semantic tag의 종류이다. 더 많은 정보는 Semantic elements 참조.
Semantic tag는 개발자 자신과 다른 개발자의 코드 가독성 향상은 물론 로봇이 웹크롤링 과정에서 더 많은 정보를 얻을 수 있다. Header만 크롤링하는 로봇이라면 <header> tag 만 찾으면 될 것이다.
기계가 의미있는 tag를 통해 정보를 이해하고 이를 그대로 또는 보여주고 싶은 형태로 가공하여 사용자에게 제공하는 것이 "Semantic WEB" 개념이다.
image를 이용한 semantic 예시
img를 삽입하는 방법은 <img> tag를 사용, 또는 <div> tag로 background-image 속성을 사용하는 것이다. 동일한 기능을 하나 다음의 차이가 있다.
<img> 는 alt 속성 등을 통해 추가 정보를 부여할 수 있으나 <div>의 background-image 는 순수하게 image만 삽입한다.
alt 속성을 통해 정보를 얻으려하는 로봇이 있다면 <div> 로는 제공을 못하게 된다. 정보를 제공해야 하는 image라면 <img>를 써야 한다. 하지만 순수하게 image 표출만이 목적이라면 <div>를 사용하는 것이 맞을 것이다.
