Microdata (HTML): Difference between revisions

Revision as of 20:36, 4 March 2011

Revision as of 20:28, 9 March 2011

Line 1:

'''Microdata''' is a [[WHATWG]] [[HTML5]] specification used to nest [[semantics]] within existing content on web pages.<ref name="WHATWG"/> [[Search engines]], [[web crawlers]], and [[Web_browser|browsers]] can extract and process Microdata from a web page and use it to provide a richer browsing experience for users. Microdata use a supporting vocabulary to describe an item and name-value pairs to assign values to its properties.<ref name="DIVE"/> Microdata helps technologies such as search engines and web crawlers better understand what information is contained in a web page, providing better [[Search_engine_results_page|search results]]. Microdata is an attempt to provide a simpler way of annotating HTML elements with machine readable tags than the similar approaches of using [[RDFa]]s and [[Microformats]].

'''Microdata''' is a proposed feature of [[HTML5]] intended to provide a simple way{{Clarify|date=March 2011}} to embed [[semantic markup]] into [[HTML]] documents.

== Microdata Vocabularies ==

Microdata can be viewed{{Who|date=March 2011}} as an extension of [[microformat]]s, which attempts to address the deficiencies{{Citation needed|date=March 2011}} of microformats without the complexity of systems such as [[RDFa]].

Microdata vocabularies provide the semantics, or meaning of an Item. Web developers can design a custom vocabulary or use vocabularies available on the web. A collection of commonly used (and Google Supported) Microdata vocabularies located at http://data-vocabulary.org which include: ''Person'', ''Event'', ''Organization'', ''Product'', ''Review'', ''Review-aggregate'', ''Breadcrumb'', ''Offer'', ''Offer-aggregate''. For some purposes, an ad-hoc vocabulary is adequate. For others, a vocabulary will need to be designed. Where possible, authors are encouraged to re-use existing vocabularies, as this makes content re-use easier.<ref name="WHATWG"/>

== Microdata Global Attributes ==

* <code>Itemscope</code> – Creates the Item and indicates that descendants of this element contain information about it.<ref name="WHATWG"/> This attribute precedes the <code>itemtype</code> attribute in the HTML element’s tag.

* <code>Itemtype</code> – A valid URL of a vocabulary that describes the item and its properties context.

* <code>ItemId</code> – Indicates a unique identifier of the item in the vocabulary.

* <code>Itemprop</code> – Indicates that its containing tag holds the value of the specified item property. The properties name and value context are described by the items vocabulary. Properties values usually consist of string values, but can also use [[URL|URL's]] using the a element and its <code>href</code> attribute, the <code>img</code> element and its <code>src</code> attribute, or other elements that link to or embed external resources.<ref name=WHATWG/>

* <code>Itemref</code> - Properties that are not descendants of the element with the <code>itemscope<code> attribute can be associated with the item using this attribute. Provides a list of elements to web crawlers to find additional property values of the item elsewhere in the document.<ref name="WHATWG"/>

== Example ==

The following markup may be found on a typical about page containing information about a person:

<source lang=html4strict>

<section> Hello, my name is Jhon Doe, I am a graduate research assistant at the Univeristy of Dreams. My friends call me Jhonny.

You can visit my homepage at <a href="http://www.JhonnyD.com">www.JhonyD.com</a>. I live at 1234 Peach Drive Warner Robins, Georiga.</section>

</source>

Here is the same markup with added Microdata:

<source lang=html4strict>

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

Hello, my name is

<span itemprop="name">Jhon Doe</span>,

I am a

<span itemprop="title">graduate research assistant</span>

at the

<span itemprop="affiliation">Univeristy of Dreams</span>.

My friends call me

<span itemprop="nickname">Jhonny</span>.

You can visit my homepage at

<a href="http://www.JhonnyD.com" itemprop="url">www.JhonyD.com</a>.

<section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">

I live at

<span itemprop="street-address">1234 Peach Drive</span>

<span itemprop="locality">Warner Robins</span>

,

<span itemprop="region">Georiga</span>.

</section>

</section>

</source>

As the above example shows, Microdata items can be nested. In this case an item of type http://data-vocabulary.org/Address is nested inside a item of type http://data-vocabulary.org/Person.

The following text shows how Google parses the Microdata from the above example code. Developers can test if pages containing Microdata using ''Googles Rich Snippet Testing Tool''<ref name="GoogleRS"/>.

Item

Type: http://data-vocabulary.org/person

name = Jhon Doe

title = graduate research assistant

affiliation = Univeristy of Dreams

nickname = Jhonny

url = http://www.jhonnyd.com/

address = Item(1)

Item 1

Type: http://data-vocabulary.org/address

street-address = 1234 Peach Drive

locality = Warner Robins

region = Georiga

== Support ==

[[Google]] can use microdata in its [[Search engine results page|result pages]].<ref>[http://www.google.com/support/webmasters/bin/topic.py?topic name=21997GoogleRS ''Rich snippets (microdata, microformats, RDFa)'', Google webmaster central]</ref>

Currently, no browser supports the Microdata [[Document_Object_Model|DOM]] [[API]].

== See also ==

Line 21 ⟶ 82:

== References ==

{{Reflist|refs=

<references />

<ref name="WHATWG">[http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata,''Microdata &mdash; HTML5 Draft Standard'']</ref>

<ref name="GoogleRS">[http://www.google.com/support/webmasters/bin/topic.py?topic=21997 ''Rich snippets (microdata, microformats, RDFa)'', Google webmaster central]</ref>

<ref name="DIVE">[http://diveintohtml5.org/extensibility.html ''“Distributed,” “Extensibility,” And Other Fancy Words'', Dive Into HTML5]</ref>}}

[[Category:Microformats]]

Line 28 ⟶ 92:

{{web-stub}}

[[fr:Microdonnée]]