How to use Micro Data in HTML5

HTML5 come with many interesting new features and Microdata is one of them.After few years of HTML5, Microdata is not very well known for the usage in the website but it is very important for search engine ranking.

Introduction to Microdata

HTML5 Microdata is a new microformats added in HTML5 which is used to describe the meaning of the information in a suitable form for the search engine. HTML5 microdata describes what page contains, what information about the company, person page have and provide to the search engine.

HTML5 Microdata includes a set of attributes which you can use with any element.Attributes allow to read the content of the page where it automatically find and retrieve the required data.Using Microdata, you can create your own vocabularies except HTML5 provides and extend your web pages with custom semantics.
Microformats allow to mark the web page content as per their types and formats and it will be added to the tag and microformats is not visible to visitors.

HTML5 provide a new format known as Microdata (microdata) which support the standard dictionary Schema.org.Nowadays,HTML5 microdata is an “official” format to organize data.

I hope you all of you are aware of Microformats type hcard, hProduct etc. Most of them are allow you to add semantic annotations to the markup that you can use as the class. For example like this:

The relationship between Microdata ane Microformats is because both are the ways to analyze web page based on the specific content and semantics of the search engines.

At the time of this writing, recognized by the following microformats:

hCard – Markup format contact information (address, phone, and so on. d.);
hRecipe – Format to describe the recipes;
hReview – Reviews markup format;
hProduct – Markup format products.

Microformat used for marking the contact information is called hCard. Let’s see the example of hCard as follows:

Like Microformats, Microdata also allows to describe cards, products etc

Microdata contains a set of elements where each has a set of properties in the form of key-value pairs.Let;s see the elements of the Microdata.

Microdata have 5 new global attributes:

ATTRIBUTES

Attribute Name: Attribute value

itemscope : It is an attribute with boolean type and creates Microdata block. It is a key attribute microdata and specify the contents of the HTML element in a single structure.

itemtype : It is an attribute used to define the type of data item for a particular Microdata block (itemscope). It is a type of structure and value is in the form URL.

itemprop : It is an attribute element defines a property of the data for declared type.

itemid : It is an attribute assigns a global unique identifier to a micro element.

itemref : It is an attribute that refers to associate a data block ID.

EXAMPLE:

If you don’t have any idea about MicroData, first refer to a predefined dictionary of Schema.org.

To make the HTML element use Microdata,just add the itemscope attribute,To to give a name to element,itemtype = “name_of_class” attribute is used and attribute itemprop = “name_of_property” is used for the exact specifications.When key value pair is not enough, you can use nested form of nodes

Let me illustrate the working demo of MicroData which explain in a better way. Here I am going to create some attributes and assign attributes value to the element.