Post
Ask Question

HTML5 Microdata

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 allows us to define our own customized elements and start embedding custom properties in our web pages. Its 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.
 
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 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 the above list Itemscope, Itemtype and Itemprop 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 examples.
 
Example 1:
  1. <html>  
  2.   
  3.     <head>  
  4.         <title>Introduction to Microdata</title>  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <div id="myTab">  
  9.             </div>  
  10.             <h1>Microdata</h1>  
  11.             <div itemscopeitemtype="http://schema.org/Person">  
  12.                 <p>My name is  
  13.                     <spanitemprop="name">Pankaj Choudhary</span>.</p>  
  14.             </div>  
  15.             <div itemscopeitemtype="http://schema.org/Person">  
  16.                 <p>This is an example of  
  17.                 <span itemprop="name">Microdata</span>.</p>  
  18.             </div>  
  19.     </body>  
  20.   
  21. </html>  
Output:
 
result
 
In the 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 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
  1. <html>  
  2.   
  3.     <head>  
  4.         <title>Introduction to Microdata</title>  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <div id="myTab">  
  9.             </div>  
  10.             <h1>Microdata</h1>  
  11.             <div itemscopeitemtype="http://schema.org/Person">  
  12.                 <imgitemprop="image" height="100px" width="200px" src="Indian-Flag-Wallpapers-HD-Images-Free-Download-2.jpg" alt="TutorialsPoint">  
  13.             </div>  
  14.             <div itemscopeitemtype="http://schema.org/Person">  
  15.                 <p>Article Published on  
  16.                     <a href="http://www.c-sharpcorner.com" itemprop="url">C#-Corner</a>. </p>  
  17.             </div>  
  18.             <div itemscopeitemtype="http://schema.org/Person">  
  19.                 <p>Date of published is  
  20.                     <time itemprop="birthday" datetime="2016-02-01"> Feb 01 2016 </time>  
  21.                 </p>  
  22.             </div>  
  23.     </body>  
  24.   
  25. </html>  
Output
 
Output
 
Generally, values of the property are string type as we define in the previous example but values can be “url”, “date” and “times” types. In the above example, we defined properties that types are “url” and “date”
 
Example 3
  1. <html>  
  2.   
  3.     <head>  
  4.         <title>Introduction to Microdata</title>  
  5.         <script src="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/external/jquery/jquery.js">  
  6.             </script>  
  7.             <script>  
  8.             $(document).ready(function ()  
  9.             {  
  10.                 alert(document.getItems);  
  11.             })  
  12.             </script>  
  13.     </head>  
  14.   
  15.     <body>  
  16.         <div id="myTab">  
  17.             </div>  
  18.             <h1>Check Browser Compatability for Microdata</h1>   
  19.     </body>  
  20.   
  21. </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 conform 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 additional information related to the element of the page.


Similar Articles