Semantic Web과 Semantic Tag

Semantic Web이란

의미론적인 웹이라는 뜻으로, 쉽게 말해 컴퓨터가 이해할 수 있는 웹이다.

위키피디아에 나와있는 예를 들어 설명할 수 있다.

HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었는데, 기존에

<div id="header"> 내용 </div>

로만 나타낼수 있던 머리 부분을

<header> 내용 </header>

로 쉽게 더 의미론적으로 나타낼수 있게 되었다. 이는 div와 id=header 모두 읽었던 예전 XHTML이나 HTML4보다 훨씬 효율적이라고 볼 수 있다.

위에 예에 div로 이루어진 html은 컴퓨터는 아무 의미 없는 div 태그에 의미 없는 id 값으로 이해하는 반면 밑에 있는 header로 이루어진 html은 컴퓨터가 이해하기 내용에 머리 부분으로 이해할 수 있다.

Semantic Tag란

의미 있는 태그란 뜻으로, 예를 들어 div 태그에 id 값을 주는 것이 아닌 header, nav, section, footer 등등을 사용하여 특정 키워드 검색을 통해 내가 만든 웹사이트가 검색 결과에 나올 수 있고 코드가 눈에 보이기 쉽기 때문에 유지 보수가 쉽다는 장점이 있다.

이미지 삽입시 img 태그 vs div 태그

두 태그 사용시 모두 이미지를 삽입할 수 있다는 공통점이 있지만 성격은 완전 다르다.

img 태그

1. Semantic Tag이므로 이미지라는 의미가 있다.
2. 이미지의 의미가 필요하고 연관된 정보가 있을 때 사용한다.

div 태그

1. 의미가 없다.
2. 단순한 미적 용도로 이미지 삽입 시 사용한다.