Back to Top

How to use Micro Data in HTML5

MicroData in HTML5 with Example

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:

Note: You can apply above attributes to any tag.

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.

Share:
Share on Facebook5

Share on LinkedIn0Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit1

Comments (1)

  1. Excellent post. Well written, great content! Thank you author.

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular Posts

The Readers’ Poll – July 2012

Posted on 4 years ago

Bhumi

Run-Time Validation using jQuery

Posted on 3 years ago

Bhumi

How to Use PHP Sessions to Store Data

Posted on 8 months ago

Bhumi

How to use session in Magento

Posted on 4 years ago

Bhumi

HTML5 Geolocation API with Example

Updated 17 years ago

Bhumi

Overview of Views in MySQL

Updated 17 years ago

Bhumi

What is Closure in JavaScript?

Updated 17 years ago

Bhumi

How to use JavaScript Promise API?

Updated 17 years ago

Bhumi

Type Hinting Callable Functions in PHP

Updated 17 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 1 year ago

Bhumi

The Reader’s Poll – August 2014

Posted on 2 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 2 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 3 years ago

Bhumi