HTML5 Microdata

Article

Introduction

Microdata is used to nest metadata within existing content on web pages. This mechanism allows machine-readable data to be embedded in HTML documents in an easy-to-write manner, with an unambiguous parsing model. Microdata allow us to define our own customized elements and start embedding custom properties in our web pages. It’s purpose is not to make a new widget appear on our web page but to help automated programs like Google understand and better handle the content of our web pages.

A microdata consists of a group of name-value pairs. The group of name-value pairs is called items, each name-value property is called as a property and these and properties are represented by regular elements.

Global Attributes

Microdata defines five Global HTML attributes that can be applied to any HTML5 tag. Microdata introduces the following five global attributes that can be available for any element to use and give context for machines about our data.

Attribute	Description
Itemscope	Creates the Item and indicates that descendants of this element contain information about it. The itemscope attribute is a Boolean attribute that tells that there is Microdata on this page.
Itemtype	A valid URL of a vocabulary that describes the item and its properties context.
Itemprop	This attribute defines a property for the item.Indicates that its containing tag holds the value of the specified item property.
Itemid	Define a unique identifier of the item.
Itemref	Provides a list of element ids with additional properties elsewhere in the document. This attribute gives a list of additional elements to find the name-value pairs of the item.

In above list Itemscope ,Itemtype and Itemprop are generally use but Itemref and itemid aren’t necessary to get up and running with microdata and are not needed by the most common formats.

Let us take some example.

Example 1:

<html>
<head>
<title>Introduction to Microdata</title>
</head>
<body>
<div id="myTab">
</div>
<h1>Microdata</h1>
<div itemscopeitemtype="http://schema.org/Person">
<p>My name is
<spanitemprop="name">Pankaj Choudhary</span>.</p>
</div>
<div itemscopeitemtype="http://schema.org/Person">
<p>This is an example of
<span itemprop="name">Microdata</span>.</p>
</div>
</body>
</html>

Output:

result

In above example we define the itemscopeattribute that is used to indicate that the element it is placed on and it’s children represent a microdata item. We also used the itemtype(“http://schema.org/Person”) that defines the microdata vocabulary in use. Microdata vocabularies can be nested and can be dependent on one another. This itemtype attribute can be assumed like a unique character string and used to explain that how to parse and look for the itemprop tags in the sub-elements to extract the meaning needed from the document. We define two items that have the property “name”.

Example 2

<html>
<head>
<title>Introduction to Microdata</title>
</head>
<body>
<div id="myTab">
</div>
<h1>Microdata</h1>
<div itemscopeitemtype="http://schema.org/Person">
<imgitemprop="image" height="100px" width="200px" src="Indian-Flag-Wallpapers-HD-Images-Free-Download-2.jpg" alt="TutorialsPoint">
</div>
<div itemscopeitemtype="http://schema.org/Person">
<p>Article Published on
<a href="http://www.c-sharpcorner.com" itemprop="url">C#-Corner</a>. </p>
</div>
<div itemscopeitemtype="http://schema.org/Person">
<p>Date of published is
<time itemprop="birthday" datetime="2016-02-01"> Feb 01 2016 </time>
</p>
</div>
</body>
</html>

Output

Output

Generally values of property are string type as we define in previous example but values can be “url” , “date” and “times” types. In above example we defined properties that types are “url” and “date”

Example 3

<html>
<head>
<title>Introduction to Microdata</title>
<script src="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/external/jquery/jquery.js">
</script>
<script>
$(document).ready(function ()
{
alert(document.getItems);
})
</script>
</head>
<body>
<div id="myTab">
</div>
<h1>Check Browser Compatability for Microdata</h1>
</body>
</html>

Output

run

The getItems() function is used to check that browser support the “Microdata” or not. If browser doesn't support microdata, the getItems() function will be #ff0000 else getItems() function return the function definition.

Conclusion

All search engines support microdata as part of their rich snippets program like Google and Yahoo. When a search engine's web crawler parses our page and finds microdata properties that confirm to the vocabulary it parses out properties and stores them alongside the rest of the page data. So proper use of metadata and Microdata can increase execution speed by providing the additional information related to the element of page.