semantic web, 그리고 semantic tag

semantic이란 쉽게 말해, 코드를 읽지 않고 시야상으로 확인만 할 때에도 특정 tag의 의미와 기능을 짐작케 하는 것이다. 반면

<div>는 어떨까. div와 같이 아무런 의미 없이 특정 기능을 하는 태그들이 있다. 예를 들어 <span> 또한 의미가 없지만 기능을 한다. 이들을 모두 non-semantic tag라 한다. container로서의 역할을 수행하는 tag들이다.

반대로 semantic tag가 있다. semantic tag의 예로는 article, form, header, footer, main 등을 들 수 있다. tag 이름만으로 해당 섹션이 어떤 기능을 할 지를 유추할 수 있다.

non semantic은 모두 div로 통일할 수 있지만 그럼에도 불구하고 div, header, footer, main 등으로 최대한 나누어 줘야 한다. 이것이 그나마 semantic을 지향하는 방식이기 때문이다. semantic tag는 가시적인 파악이 쉽다. 반면 비슷한 기능을 하는 tag들이 모두 div로 할당된다면 해당 섹션의 기능을 파악하기에 불편함이 많아진다.

semantic web 또한 semantic tag와 동일 선상 위에 있다. semantic web은 ‘의미론적인 웹’이라는 사전적 뜻을 가진다. 창시자 팀 버너스리는 semantic web을 ‘기계가 읽고 처리할 수 있는 웹’으로 정의했다. 쉽게 말하자면 사람의 머리 속에 자리잡은 개념을 컴퓨터의 언어로 표현하고 또한 컴퓨터가 이해하고 사용할 수 있게끔 만드는 것이다.

<img src="URL" /> // semantic tag
<div style="background-image: url(URL);" /></div> // non-semantic tag

예를 들어, 우리는 div만을 이용하여 image를 생성할 수 있다. 하지만 non-semantic tag인 div로 img 속성을 부여할 경우 img로서의 기능은 충실히 이행하겠지만 이는SEO(search engine optimization)에 불리하며, tag 자체만으로 어떤 의미를 지니는지 파악할 수 없어 가독성이 떨어지는 등의 문제가 발생한다. 반면 semantic tag인 img tag는 위의 단점들을 모두 보완하므로 되도록 semantic tag를 지향하는 것이 좋다.