태그의 의미 부여

- 태그에 의미를 부여하면 내용을 기계적으로 판별할 수 있음.

 

* 태그의 의미 부여

- 태그에 부가 정보(태그 정보)를 추가하면 컴퓨터가 그 요소의 의미를 해석하기 쉬워짐.

- 그러면 검색 엔진 등에 대해 주소나 전화번호와 같은 정보를 쉽게 제공할 수 있음.

- HTML5에서는 세 가지 방법을 사용하여 태그에 의미를 추가하고 있음.

 

 

[마이크로 데이터]

- HTML5에서 도입된 사양으로, 요소를 아이템(한 건의 데이터)으로 간주하여 의미를 부여함.

- 아래와 같이 고유한 속성이 마련되어 있음.

 

<div itemscope itemtype="http://data-vocabulary.org/Person">

<p itemprop="name">유미나</p>

</div>

 

1) itemscope 속성

- 이 요소(<div>~</div>)가 아이템이라는 것을 선언함.

 

2) itemtype 속성

- 각 프로퍼티가 무엇을 나타내는 지에 대한 정의(vocabulary)가 써 있는 장소를 지정함.

 

3) itemprop 속성

- 아이템의 프로퍼티의 이름을 지정함.

- itemtype에서 정한 값을 입력함.

 

    : 이 부분이 프로퍼티의 값이 됨. 단, time 요소에서는 datetime 속성의 값이, a 요소에서는 href 속성의 값이 데이터로 간주됨.

 

- 떨어진 곳에 있는 데이터를 아이템으로 편입시키고 싶을 때는 itemref 속성을 사용함.

 

<div itemscope itemref="rb">

...

</div>

<p itemprop="rb">리본</p>

 

- 책의 ISBN(서적 코드)과 같이 전 세계적으로 동일한 의미로 정해진 ID는 아래와 가이 itemid 속성으로 지정함.

<div itemscope itemid="4-7981-0103-6" itemtype=....

 

 

[마이크로 포맷]

- 원래 HTML에 존재했던 class 속성을 사용하여 의미를 부여함.

- 지정하는 값은 마이크로 포맷의 사이트(http://microformats.org/wiki/Main_Page에 정의되어 있음.

 

<div class="vcard">

<p class="fn">유미나</p>

</div>

 

    : 이 요소(<div>~</div>)가 프로퍼티의 모음(한 건의 데이터)이라는 것을 선언함. vcard는 이 요소가 인물(hcard)이라는 것을 나타냄.

    : class 속성의 값이 프로퍼티명이 됨. fn은 이름(family name)을 나타냄.

    : 이 부분이 프로퍼티의 데이터가 됨.

 

 

[RDFa]

- RDFa는 XHTML용 태그에 대한 의미 부여임.

 

<div xmlns="http://rdf.data-vocabulary.org/#" typeof="v:Person">

<p property="v:name">유미나</p>

</div>

 

    : 이 요소(<div>~</div>)가 한 건의 데이터라는 것을 나타냄.

    : 데이터가 인물이라는 것을 나타냄.

    : property 속성의 값이 프로퍼티명이 됨. v:name은 이름을 나타냄.

    : 이 부분이 프로퍼티의 데이터가 됨.

 

 

* 검색 엔진에서 사용할 수 있는 방법을 조사하기

- 태그의 의미 부여에 대한 지원 상황은 검색 엔진에 따라 다름.

- 의미 부여를 할 때는 사전에 조사를 해두면 좋음.

 

Rich Snippets(microdata, microformats, RDFa)

- Google의 해설 페이지 URL : http://support.google.com/webmasters/bin/answer.py?hl=ko&answer=99170

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)