Search within TutorialsPark

HTML5 Microdata


Use HTML5 Microdata to make your documents machine readable .


HTML5 Microdata

1.The HTML5 feature allows you to define custom semantics for your documents, inorder to convey additional meaning or information about the content.

2.Microdata syntax comprises of a group ofname/value pairs, and the documents contents can be accessed using machine-parsing tools.

3.Since, the document is machine readable SearchEngines, Webcrawlers and browsers can access and extract microdata from the document, placing the webpage better in the seach results and provide users a richer browsing experience.

4. The enclosing groups are called as items and the descriptive name/value pairs are called as properties


Browser Support for Microdata

1.The HTML5 Microdata is supported on latest versions of Mozilla Firefox and Opera.

Compatible Browsers.

firefox opera


Mozilla Firefox, Opera .

2.Before you use Microdata on your web document, you need to make sure its supported on the browser. If not you can provide fallback or alternate text, prompting users to update browser


Microdata Syntax

1.The group(or set) of name/value pairs are called as item and the attribute itemscope defines the scope of microdata item.

2.The attribute itemprop values define the names of property and their associated values.

3.The attribute itemscope is associated with an HTML element(div, span ,p ,article etc).It defines the scope of the element

Example:Microdata itemscope and itemprop.

Run the CODE»


Table: Microdata Global Attributes.

Microdata global attributes can be applied to all elements

Attribute Description
itemscope Defines the scope of microdata item.
itemprop Defines the name/value pairs of the microdata.
itemtype A URL to define the vocabulary used for encoding the microdata.
itemid To set an unique identifier for microdata item.
itemref To include itemprop attributes outside the itemscope attribute.

Microdata Vocabulary."itemtype" attribute

In the above examples we have defined our own custom microdata terms, meanings of which are known only to us.

So, we need standardized dialects which can be understood by webcrawlers and search engines to make the microdata sensible.

1. A Vocabulary is need to define the valid properties of an element, it consists of a list of properties and their descriptions.

2. Attribute itemtype denotes that the microdata has a standard vocabulary, its value is a URL defining the encoding.

3. Microdata Vocabulary allows Webcrawlers and searchengines(say Google) to understand and comprehend the content better, making the document search friendly.

Table: Microdata Vocabulary for the above example.

Property Description
Firstname First Name of the Player. Required
Lastname Last Name of the Player. Required.
Photo Player's Photo in format JPG, GIF, PNG.
Country Country player Represents. Required
Prizemoney Sum total of Prize Money Won.

We use a custom vocabulary defined at URL http://schema.org/Review to describe our item, in a machine readable format.

Example: Microdata Vocabulary using attribute itemtype.

Run the CODE»


Microdata "itemid" attribute

1.Microdata attribute itemid is used to tag items with unique IDs.

2.Unique IDs can be ISBN(International Standard Book Number) for books or ASIN(Amazon Standard Identification Number) for products sold on Amazon.com.

3.The values of this attribute ideally should be URL or URN(Uniform Resource Names).

Example: Microdata attribute itemid.

Run the CODE»


Microdata "itemref" attribute

1.Just incase you are not able to define all microdata information within one itemscope, you refer to it from outside using attribute itemref.

2.In below example the itemscope properties outside the div element are accessed using itemref attribute.

Example: Microdata attribute itemid.

Run the CODE»



Related Examples

Related Tags