Semantic이란?
'의미가 있는'이라는 뜻을 가진다.
따라서 Semantic Web은 '의미가 있는 웹'을 뜻한다.
과연 '의미가 있는 웹'이란, 무슨 뜻을 의미할까?
과거의 HTML 태그 작성 방식은 아래와 같다.
<!DOCTYPE html>
<html>
~
<body>
<div class="header">
<div class="title">Not Semantic Web</div>
<div class="detail">I'm not a Semantic Web :(</div>
</div>
</body>
</html>대부분의 태그를 div태그로 작성 후, class로 의미를 부여하는 방식이다.
<!DOCTYPE html>
<html>
~
<body>
<header>
<h1>Not Semantic Web<h1>
<p>I'm not a Semantic Web :(
Because I'm not a Semantic Web :(</p>
<header>
</body>
</html>좀 더 쉽게 그림으로 설명하고자 한다.
위 그림처럼 '제목입니다.'라는 문구를 표시하려고 하는데, Title 태그를 이용하여 Title 다운 font-size와 의미를 부여할 수 있다.
하지만 위 그림처럼 Title이 아닌 Normal text인 상태로 font-size를 직접 늘려주면 어떨까? 표시되는 화면은 동일하지만 의미론적으로는 다르다고 볼 수 있다.
제목을 알리고 싶을 경우에는 제목 태그를, 부제목을 알리고 싶을 경우에는 부제목 태그를 이용하는 것이 현명하다.
Semantic Tag 사용해야 하는 이유
첫번째는 SEO이다.
Search Engine Optimization 검색 엔진 최적화이다. 적절한 제목과 부제목, 그리고 Semantic Tag을 잘 활용한다면 사용자가 검색을 할 때 더 정확한 정보를 전달할 수 있다.
두번째는 Accessbility이다.
웹 접근성이 좋아진다. 시각적인 효과 뿐만 아니라 음성을 읽어주는 Screen Reader를 이용하거나, 키보드만을 이용해서 웹사이트를 이용하는 경우도 있다. 적절한 Semantic Tag로 잘 만들어진 웹사이트라면 Screen Reader를 이용하거나 키보드를 이용할 때 잘 동작하는 것을 확인할 수 있다.
마지막으로 Maintainability이다.
이 모든 것들을 구현하는 개발자들을 위해서이다. 개발자 입장에서 HTML 코드를 살펴볼 때, 한 눈에 알아보기 쉽고 어떤 의미와 목적으로 구현되었는지 쉽게 구별할 수 있다.
상황 예시
웹사이트에 이미지를 삽입하려고 한다. HTML내 img태그로 이미지를 삽입하는 방법이 있고, CSS내 background-image로 이미지를 삽입하는 방법이 있다. 두 방법 모두 표시되는 화면은 동일하다. 각자 어떤 경우에 사용하면 적절하고 현명할까?
HTML내 태그를 부여하고 작성할 때는 semantic web으로 의미가 있는 태그를 사용하는 것이 좋다고 하였다.
HTML img태그로 이미지를 삽입하는 경우에는 전달하려고 하는 내용과 이미지와 일치할 때이다. 삽입하려는 이미지가 내용 전달에 있어서 꼭 필요할 경우에 HTML img태그를 사용하여 이미지를 삽입한다.
CSS background-image는 어떠한 경우에 사용될까? HTML img태그와는 다르게 본 내용과 크게 관련이 없는 이미지인 경우 CSS background-image를 사용한다. 한 마디로 없어도 내용 전달에 있어서 지장이 가지 않는 경우이다.
