Semantic Web, Semantic Tags

1. Semantic Web

Semantic Web이란 ? 

- '의미론적 웹'이라는 뜻으로, 컴퓨터가 이해할 수 있는 방식으로

   인터넷 웹사이트를 제작함으로써 인터넷에 존재하는 다양한 정보를

   컴퓨터가 쉽게 이해하고 해석할 수 있도록 하는 것

 

Semantic Web의 목적

- 사람만이 웹에 산재한 정보의 의미를 파악하는 것이 아닌,

자동화된 기계가 해석할 수 있는 일종의 표준 의미정보 교환의 수단이 되는 것.

 

HTML5에서의 Semantic Web

- HTML5에서는 Semantic Web을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었는데,

  이것이 Semantic Tag이다

 

2. Semantic Tags

Semantic Tag

<header>,<section>,<article>,<img>,<footer> 등의 태그 자체의 의미를 가진 태그

<section>
	<article>
    	<img>
    </article>
</section>

 

Non-Semantic Tag

<div>,<span> 등의 의미를 지니지 않은 태그에 id, class를 부여한 태그

<div class="section">
	<div class="article">
    	<div class="img"></div>
	</div>
</div>

 

3. Semantic Tag와 Non-Semantic Tag 차이

1. img 태그를 사용하여 표현한 이미지 (Semantic Tag)

2. div, span에 background-image 속성을 사용하여 표현한 이미지 (Non-Semantic Tag)

 

1은 컴퓨터가 이해할 수 있으며, 검색 엔진에게 내가 웹 페이지에 업로드 한 것이 어떤 이미지라고 알릴 수 있다(alt='감자')

따라서, 이미지가 컨텐츠 정보와 연관이 있거나, 중요한 의미가 내포된 이미지일 때 사용할 수 있다.

 

2는 컴퓨터가 어떤 이미지인지 이해할 수 없다.

하지만 컨텐츠 정보와 연관이 없거나, 중요하지 않은 이미지를 표현할 때 사용할 수 있다.