Skip to main content
Microdata is a standardized way to provide additional semantics in your web pages.
Microdata lets you define your own customized elements and start embedding custom properties in your web pages. At a high level, microdata consists of a group of name-value pairs.
The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.

Example

  • To create an item, the itemscope attribute is used.
  • To add a property to an item, the itemprop attribute is used on one of the item's descendants.
Here there are two items, each of which has the property "name" −
<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop="name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop="name">Nuha</span>.</p>
      </div>
      
   </body>
</html>
It will produce the following result −

Properties generally have values that are strings but it can have following data types −

Global Attributes

Micro data introduces five global attributes which would be available for any element to use and give context for machines about your data.
AttributeDescription
itemscopeThis is used to create an item. The itemscope attribute is a boolean attribute that tells that there is Microdata on this page, and this is where it starts.
itemtypeThis attribute is a valid URL which defines the item and provides the context for the properties.
itemidThis attribute is global identifier for the item.
itempropThis attribute defines a property of the item.
itemrefThis attribute gives a list of additional elements to crawl to find the name-value pairs of the item.

Properties Datatypes

Properties generally have values that are strings as mentioned in above example but they can also have values that are URLs. Following example has one property, "image", whose value is a URL −
<div itemscope>
   <img itemprop="image" src="tp-logo.gif" alt="TutorialsPoint">
</div>
Properties can also have values that are dates, times, or dates and times. This is achieved using the time element and its datetime attribute.
<html>
   <body>
      
      <div itemscope>
         My birthday is:
         
         <time itemprop="birthday" datetime="1971-05-08">
            Aug 5th 1971
         </time>
         
      </div>
      
   </body>
</html>
It will produce the following result −

Properties can also themselves be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property.

Microdata API support

If a browser supports the HTML5 microdata API, there will be a getItems() function on the global document object. If browser doesn't support microdata, the getItems() function will be undefined.
function supports_microdata_api() {
   return !!document.getItems;
}
Modernizr does not yet support checking for the microdata API, so you’ll need to use the function like the one listed above.
The HTML5 microdata standard includes both HTML markup (primarily for search engines) and a set of DOM functions (primarily for browsers).
You can include microdata markup in your web pages, and search engines that don't understand the microdata attributes will just ignore them. But if you need to access or manipulate microdata through the DOM, you'll need to check whether the browser supports the microdata DOM API.

Defining Microdata Vocabulary

To define microdata vocabulary you need a namespace URL which points to a working web page. For example http://data-vocabulary.org/Person can be used as the namespace for a personal microdata vocabulary with the following named properties −
  • name − Person name as a simple string
  • Photo − A URL to a picture of the person.
  • URL − A website belonging to the person.
Using about properties a person microdata could be as follows −
<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype="http://data-vocabulary.org/Person">
            <h1 itemprop="name">Gopal K Varma</h1>
         
            <p>
               <img itemprop="photo" src="http://www.example.com/green/images/logo.png">
            </p>
            
            <a itemprop="url" href="#">Site</a>
         </section>
      </div>
      
   </body>
</html>
It will produce the following result −

Google supports microdata as part of their Rich Snippets program. When Google's web crawler parses your page and finds microdata properties that conform to the http://data-vocabulary.org/Person vocabulary, it parses out those properties and stores them alongside the rest of the page data.
You can test above example using Rich Snippets Testing Tool using http://www.example.com/html5/microdata.htm
For further development on Microdata you can always refer to HTML5 Micordata.

Comments

Post a Comment

Popular posts from this blog

The Windows Firewall with Advanced Security is a firewall that runs on the Windows Server 2012 and is turned on by default. The Firewall settings within Windows Server 2012 are managed from within the  Windows Firewall Microsoft Management Console . To set Firewall settings perform the following steps − Step 1  − Click on the Server Manager from the task bar → Click the Tools menu and select Windows Firewall with Advanced Security. Step 2  − To see the current configuration settings by selecting  Windows Firewall Properties  from the MMC. This  allows access to modify the settings  for each of the three firewall profiles, which are –  Domain, Private and Public  and IPsec settings. Step 3  − Applying custom rules, which will include the following two steps − Select either  Inbound Rules  or  Outbound Rules  under  Windows Firewall with Advanced Security  on the left side of the management console...
Post a Comment
Read more
In this chapter, we will see how to enable remote desktop application. It is important because this enables us to work remotely on the server. To do this, we have the following two options. For the first option, we have to follow the steps given below. Step 1  − Go to Start → right click “This PC” → Properties. Step 2  − On Left side click “Remote Setting”. Step 3  − Check radio button “Allow Remote connection to this computer” and Check box “Allow connection only from computers running Remote Desktop with Network Level Authentication (recommended)” → click “Select Users”. Step 4  − Click Add. Step 5  − Type user that you want to allow access. In my case, it is administrator → click OK. For the  second option , we need to follow the steps given below. Step 1  − Click on “Server Manage” → Local Server → click on “Enable” or Disable, if it is Disabled.
Post a Comment
Read more
In this chapter, we will see how to configure WSUS and tune it. The following steps should be followed for configuring it. Step 1  − When you open it for the first time, you should do it by going to “Server Manager” → Tools → Windows Server Update Services, then a Configuration wizard will be opened and then click → Next. Step 2  − Click “Start Connecting” → Wait until the green bar is full and then → Next. Step 3  − Check the box for which the updates want to be taken, I did for English and then → Next. Step 4  − Check the box for all the products which you want to update. It is just for Microsoft products and it is recommended to include all the products related to Microsoft and then → Next. Step 5  − Choose the classification updated to be downloaded, if you have a very good internet speed, then check all the boxes, otherwise just check “Critical Updates”. Step 6  − Now we should schedule the updates which I will recommend to do it a...
Post a Comment
Read more