시맨틱 웹(Semantic Web)과 시맨틱 태그(Semantic Tags)에 대한 이해

시맨틱 웹 (Semantic Web)

시맨틱 웹이란 무엇일까요?

Semantic은 사전상 '의미론적인, 의미의' 이라는 뜻을 가지고 있습니다.

그렇다면 시맨틱 웹은 '의미있는 웹'정도로 이해할 수 있는데 

의미 있는 웹이란 어떤 웹을 가리키는 걸까요?

 

시맨틱 웹의 목적

인터넷이 폭발적으로 보급되고 웹상에 축적되는 정보의 양이 방대해짐에 따라

정보 검색시 불필요하거나 덜 연관성있는 정보를 거를 필요성이 대두되었습니다.

따라서 단순히 사람만이 웹의 정보를 파악하는 것이 아니라,

자동화된 기계가 그 의미를 해석하고 

정보간의 관계를 이해할 수 있도록 하는 것이 시맨틱 웹의 목적입니다. 

 

검색 엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름 없습니다.

검색엔진은 매일 웹사이트 정보들을 수집한 뒤 

예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓습니다.

이 인덱스를 수집하는 기준이 바로 HTML의 태그가 되는데, 

그 중 시맨틱 태그의 사용 유무에 따라 인덱스 포함 여부가 결정됩니다.

 

시맨틱 태그 (Semantic Tags)

<!-- 시맨틱 태그 미사용 예 -->

<div>
  <div style="font-size: 2em; font-weight: bolder">
    귀여운 강아지
  </div>
</div>

<!-- 시맨틱 태그 사용 예 -->

<header>
  <h1>
    귀여운 강아지
  </h1>
</header>

위 HTML 형식과 아래 HTML 형식은 웹문서상 보이는 결과는 같습니다.

하지만 첫번째 예시는 태그만 봐서는 어떤 내용인지 유추하기 어렵습니다.

반대로 두번째 예시는 <header>와 <h1>이라는 명확한 의미가 있는 태그를 사용함으로써 

코드의 가독성을 높일뿐 아니라 문서의 핵심요소를 빠르게 파악할 수 있습니다.

 

non-시맨틱 요소 예시

<div>

<span>

 

시맨틱 요소 예시

<img>

<iframe>

<table>

<header>

<footer>

<main>

등등....

 

출처: https://www.w3schools.com/html

 

 

<img> VS <div> + background-image

두 방식 모두 이미지를 웹화면으로 구현할 수 있는 방법이지만,

<img>는 의미가 내포되어 있는 시맨틱 태그임에 반해

<div>는 그 반대라 사용 용도가 다릅니다.

이 점 유의하며 둘의 차이점을 알아보고자 합니다.

 

<img> 태그를 쓸 때

1. 회사 로고, 인물 프로필 사진 등 콘텐츠 정보와 연관이 있는 이미지를 쓸 때 (alt 속성 함께 사용)

2. 경고 아이콘과 같이 중요한 의미가 내포된 이미지를 쓸 때 (마찬가지로 alt 속성 함께 사용)

3. 페이지 프린트시 이미지가 함께 나오도록 할 때

 

<div> 태그 + background-image 속성을 쓸 때

1. 이미지가 콘텐츠의 일부가 아닐 때

2. 이미지 스프라이트를 이용할 때

이미지 스프라이트 사용 예시 (네이버 화면)

3. 말그대로 웹문서의 배경을 채우기 위한 용도일 때

4. 페이지 프린트시 이미지가 나오지 않게 할 때