Semantic Web이란
단어 뜻(의미론적) 그대로 웹 문서를 그 의미에 맞게 구성하는 방식이다.
웹 문서는 div, p, span 등 블록/인라인요소만으로도 만들어질 수는 있다.
하지만 이런 문서를 컴퓨터가 읽게 된다면, 컴퓨터는 웹 문서의 어떤 데이터가 중요한 내용인지 구분을 할 수 없게 된다. 이는 검색엔진 노출, 데이터 분석 등 컴퓨터가 할 수 있는 일들을 크게 제한시킨다.
웹 문서의 유지보수를 담당하는 사람 입장에서도, 웹 문서가 길고 복잡해질수록 문서의 개발 의도와 구조를 파악하기 어려워진다.
그렇기 때문에 웹 문서에 담기는 데이터를 구조화시키고자 하는 방식이 생겨난 것이다.
예를 들면 Semantic Web에서는 제목으로 표현하고자 한 데이터를 제목으로(h1~h6), 삽입한 이미지를 이미지로(embed가 아닌 img), 여러 내용이 들어있는 형태의 데이터를 리스트 혹은 테이블(table, ul/ol)로 지정하여 컴퓨터가 읽어도, 사람이 봐도 그 데이터가 문서에 존재하는 의미를 알 수 있게끔 표현한다.
구조와 디자인의 분리
웹 문서가 어떻게 눈에 보이는지는 당연히 중요하다. 하지만 데이터의 구조를 이해할 수 있는 웹 문서를 만들려면 웹 문서의 디자인과 구조는 분리되어야 한다. 이때 결국 눈에 보이게 되는 것은 똑같더라도, 문서의 구조를 어떻게 구성할지에 대해서는 고민이 필요하다.
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
여기서 img 태그는 그 자체로 삽입된 데이터가 이미지라는 것을 표현하는 semantic tag이다. 반면 div 태그에 배경이미지 속성을 추가하는 것은 아무런 의미가 없는 블록 요소의 배경을 이미지로 채운 것이다. 따라서 전자의 방법은 데이터가 문서의 내용과 관련이 있을 때 사용하고, 후자의 방법은 문서의 내용과 관련 없는 순수한 디자인적 요소일 경우에 사용하는 것이 바람직하다.
위와 같은 예시를 볼 때, 곰을 찍은 사진은 img, 사진 위 텍스트 '곰'의 도마뱀 배경은 배경이미지 속성을 추가하는 것이 바람직할 것이다.
