HTML5 - SPLessons

HTML5 Microdata

Chapter 15

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Microdata

HTML5 Microdata

shape Description

HTML5 Microdata provides custom semantics for user documents or web pages and are also known as Nest Metadata with existing content of the document. Following are the concepts covered.

  • What is Geo Microdata
  • Data Vocabulary
  • Anotomy of Microdata
  • Browser Support

What is Geo Microdata

shape Description

Microdata is used to add some additional meaning or information to the content in a user document which can accessed by using machine parsing tools. In order to get the browsing experience, extract the information from user and place into the web page for better search results. Microdata syntax is a group of name-value pairs. To assign the values to these groups, Microdata uses supporting Vocabulary. The image below demonstrates the Microdata.

The below example demonstrates the basic micro data document which provides some information.

<html>
 <div itemscope> 
       <p>Technology Name:<span itemprop="techonologyname">HTML5 </span>.</p> 
       <p>Tutorial Name: <span itemprop="lastname">SPlessons</span>.</p> 
       <p>Photo: <img itemprop="photo" src="splessons.jpg" height="100" width="150"> </p> 
 </div> 
</html>

Result
By running the above code in a preferred browser following output is obtained.

Data Vocabulary

shape Description

Microdata does not allow various types of vocabularies, but some vocabularies such as schema.org are allowed by Microdata. Schema.org allows some third parties. Existing features can be easily extended, then the items are signed to the super type and the extension type.

Schema.org

Several major search engines have been collaborating on a new common data vocabulary called schema.org.

Following are the Microdata vocabulary processing rules.

Anotomy of Microdata

shape Description

In order to study the structutre of microdata user need to describe about the attributes of the microdata as follows.

Itemscope

shape Description

The attribute is used to get the scope of the element and is associated with the HTML elements like div, span, p. article. The code below is used to demonstrate the itemscope attribute.

<html>
 <div itemscope> 
       <p>Techonology Name:<span itemprop="techonologyname">HTML5 </span>.</p> 
       <p>Tutorials Name: <span itemprop="tutorialsname">SPlessons</span>.</p> 
       <p>Photo: <img itemprop="photo" src="splessons.jpg"height="100" width="150"> </p> 
       <p>Techonology <span itemprop="techonology">HTML</span>.</p> 
      <p>Author: <span itemprop="author">Tim Berners-Lee</span>.</p> 
 </div> 
</html>

Result
By running the above code in a preferred browser, following output appears.

itemprop

shape Description

Itemprop is used to refer the name-value pairs i.e names of the property and their associated values of the microdata. The code below is used to demonstrate the itemprop attribute.

<html>
 <div itemscope> 
       <p>Techonology Name:<span itemprop="techonologyname">HTML5 </span>.</p> 
       <p>Tutorials Name: <span itemprop="tutorialsname">SPlessons</span>.</p> 
       <p>Photo: <img itemprop="photo" src="splessons.jpg"height="100" width="150"> </p> 
       <p>Techonology <span itemprop="techonology">HTML</span>.</p> 
      <p>Author: <span itemprop="author">Tim Berners-Lee</span>.</p> 
 </div> 
</html>

Result
By running the above code in a preferred browser, following output appears.

itemtype

shape Description

Itemtype attribute is used to define microdata having standard vocabulary and its value is URL that defines encoding. Vocabulary is used to allow the search engines to encode the data and make the webpages easily.

<html>
   <article itemscope     itemtype="http://schema.org/Person"> 
       <time itemprop=Publisher  datecreated="2013-7-14T 22:32:00-06:00">    
       SPlessons | Sunday, Jan 1st 2016   
       </time> ... 
       <span itemprop=editor>Tim Berners-Lee</span> 
       <span itemprop=about itemid="urn:ASIN:B000J8VLEC">HTML</span>
    <span itemprop=aggregateRatings> 9.5/10</span>  
    <span itemprop=review> The best tutorial for Learning, simply.</span> 
      </article>
</html>

Result
By running the above code in a preferred browser, following output appears.

itemid

shape Description

Itemid is used to get the items with unique IDs and there are two types of items as follows.

The values of this attribute should be URL or URN.

The code below is used to demonstrate microdata itemid attribute.

<html>
   <article itemscope     itemtype="http://schema.org/Person"> 
       <time itemprop=Publisher  datecreated="2013-7-14T 22:32:00-06:00">    
       SPlessons | Sunday, Jan 1st 2016   
       </time> ... 
       <span itemprop=editor>Tim Berners-Lee</span> 
	<!-- itemid attribute: Amazon Standard Identification Number-->
      <span itemprop=about itemid="urn:ASIN:B000J8VLEC">HTML</span>
    <span itemprop=aggregateRatings> 9.5/10</span>  
    <span itemprop=review> The best tutorial for Learning, simply.</span> 
      </article>
</html>

Result
By running the above code in a preferred browser, following output appears.

itemref

shape Description

If microdata information is not available within the item scope then use attribute itemref. The below example is demonstrates the attribute itemref.

<article> 
    <div id=USA> 
      <span itemprop=CompanyUSA>SGML</span> 
      <span itemprop=CompanyUSA>W3c</span> 
    </div>
  
    <div id=Europe> 
        <span itemprop=CompanyEU>WHAT</span> 
        <span itemprop=CompanyEU>HTML</span> 
    </div> 
  
</article> 
<!-- Attribute itemref uses itemprop property outside the article element -->

<div itemscope itemref="CompanyUSA CompanyEU">HTML</div> 

Result
By running the above code in a preferred browser, following output appears.

Browser Support

shape Description

HTML5 Microdata element is supported by all the latest browsers. Following are the browsers versions supported by HTML5.

Summary

shape Points

  • Microdata defines custom semantics.
  • Machine-parsing tools are used to access content of the document.
  • Microdata global attributes can be applied to all the elements.