Semantic Web에 대해서

Non-Semantic Tag

Semantic tag 도입 전(~HTML4)까지 컴퓨터(Search Engine)는 웹 페이지(HTML 태그)에 담긴 콘텐츠가 어떤 내용인지 미리 식별할 수 없었다. 컴퓨터가 문서 내용을 추측할 수 없기 때문에 정보검색 시 불필요한 방대한 정보가 나타날 때마다 사람이 개입하여 선별했어야만 하였다.

Non-semantic tag로 작성된 문서 예시
<div>와 <span> 태그 자체는 어떠한 의미도 없다. 따라서 이 태그가 사용된 문서를 읽을 때 컴퓨터는 어떠한 구조로 구성된 문서인지 추론할 수 없다.

<div class = "nav">
  <ul>
    <li>1. HTML</li>
    <li>2. CSS</li>
    <li>3. Semantic Web</li>
  </ul>
</div>
<div class = "header">
  <span>이것은 제목입니다.</span>
</div>
<div class = "footer">
  <span>이것은 바닥글입니다.</span>
</div>

Semantic Tag

의미론적 태그라는 뜻이다. 웹 페이지를 구성하는 각 요소의 의미를 메타정보와 같이 브라우저에게 알려주는 태그이다. Semantic 태그를 사용하면 웹 문서의 구성과 내용을 컴퓨터가 잘 추론할 수 있도록 도울 수 있다.

또한 컴퓨터가 스스로 Semantic tag를 통하여 정보를 추출하고 분석하여 사람이 개입하지 않아도 방대한 정보 중 필요한 정보를 수집(Indexing)하고 불필요한 정보를 필터링할 수 있다.

Semantic tag로 작성된 문서 예시
요소가 같는 의미를 직접적으로 나타내는 태그를 사용하여 컴퓨터가 이를 구별할 수 있게 돕고 개발자 또한 코드 읽기에 용이하다.

<nav>
  <ul>
    <li>1. HTML</li>
    <li>2. CSS</li>
    <li>3. Semantic Web</li>
  </ul>
</nav>
<header>이것은 제목입니다.</header>
<section>이것은 본문입니다.</section>
<footer>이것은 바닥글입니다.</footer>

더 알아보기: <div>에 background-image 속성을 부여하면 <img> 태그와 동일한 기능을 발휘하여 이미지를 처리할 수 있다. 그러나 컴퓨터(기계)는 <div> 태그를 사용한 문서를 정보처리 과정에서 태그 안의 콘텐츠가 이미지라는 것을 식별할 수 없다.

반면 <img> 태그를 사용한 문서는 해당 태그 뒤에 이미지 파일이 있다는 것을 컴퓨터도 인식할 수 있다. 따라서 웹 페이지에서 이미지 요소를 사용할 때는 해당 요소가 수집할 가치가 있는 주된 요소인지 단순 미적 요소로써 사용할 것인지 의도에 맞추어 적절한 태그를 선정하고 문서를 작성하는 것이 좋겠다.