Semantic Web과 Semantic Tag

1. Semantic Web

1.1 개념

기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운영성을 실현하여, 다영한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것이 목표이다.

1.2 HTML5에서의 Semantic Web

∙ 기존

<div id="header"> text </div>

∙ Semantic Web 이후

<header> text </header>

-> 보다 쉽게 더 의미론적으로 나타낼수 있게됨. (header 라는 것이 기존보다 더 알기 쉬워짐.)

2. Semantic Tag

2.1 Semantic Tag란?

웹 브라우저나 개발자에게 명확한 의미를 전달하는 것

2.2 HTML5에서 추가된 Semantic Tag

∙ header : HTML 헤더나 section에 헤더를 정의함.

∙ nav : HTML 메뉴바를 정의함.

∙ main : HTML 전체 Content를 정의함.

∙ section : HTML Section을 정의함.

∙ article HTML 하나의 글(aricle)을 정의함.

∙ aside 웹 페이지에서 배너나 추가적인 문구 등을 정의함.

∙ footer : HTML Footer를 정의함.

단, Semantic Tag가 레이아웃은 만들어 주지않으며, 웹 브라우저나 개발자에게 의미적으로 전달하는 기능을 이용(레이아웃을 주려면 CSS를 이용한다.)

3. Semantic Tag 사용 사례

3.1 img <-> div background-img

∙ img는 alt 속성에 문자열을 넣을 수 있다(검색엔진 인식가능)

∙ div background-img는 단순 이미지 첨부이다.(검색엔진 인식 불가능)

업로드한 이미지가 검색엔진에 노출되어야 한다면 img를 사용하고 단순 꾸미기용으로 사용할 경우에는 div background-img를 사용해도 된다.