Microdata in HTML5 with Examples: The HTML 5 allows to specifies the semantics of your documents rather than defining additional meaning or information to the content. The Microdata syntax contains a group of name/value pairs and the document content can be accessed by the machine parsing tool.
Hence the documents are the machine-readable Search Engines, Web crawlers and browsers can access and get microdata from the document. Providing the web page better in search results which provides users rich browsing experience.
The items in microdata are enclosing groups and the properties are known as descriptive name/value pairs.
Microdata in HTML5 with Examples
HTML5 Microdata Browser Support
The Mozilla Firefox and Opera both support the latest version of HTML 5 Microdata. Before using microdata on a web document, you have to make sure that it is supported by the browser or not. If not you have to define fallback or alternate text for prompting users to update the browser.
HTML5 Microdata Syntax
The group/set of name or value pairs are called as an item and the attribute item scope specifies the scope of microdata item.
The attribute itemprop describes the names of properties with their values.
The attribute item scope is associated with HTML element (div, span,p, article, etc) which defines the scope of an element.
HTML5 Microdata Example
<html> <div itemscope> <p>First Name:<span itemprop="firstname">Roger </span>.</p> <p>Last Name: <span itemprop="lastname">Federer</span>.</p> <p>Photo: <img itemprop="photo" src="roger_federer.jpg"> </p> <p>Country: <span itemprop="country">Switzerland</span>.</p> <p>Prizemoney: <span itemprop="prizemoney">$ 77,564,273</span>.</p> </div> </html>
HTML5 Microdata Global Attributes.
All elements will accept these Microdata global attributes.
| ATTRIBUTE | DESCRIPTION |
|---|---|
| itemscope | Defines the scope of the microdata item. |
| itemprop | Defines the name/value pairs of the microdata. |
| itemtype | A URL to define the vocabulary used for encoding the microdata. |
| itemid | To set a unique identifier for the microdata items. |
| itemref | To include itemprop attributes outside the itemscope attribute. |
HTML5 Microdata Vocabulary.” item type” attribute
In the above example, we specified our customized microdata terms but we may need a standardized version to make microdata sensible with the help of web crawlers and search engines.
1. Vocabulary is used to describe the valid properties of an element that contains a list of properties and their descriptions.
2. The attribute item type specifies the microdata which has standard vocabulary and its value is URL which defines encoding.
3. Microdata vocabulary allows Web crawlers and search engines to make the content better and document search-friendly.
Table for HTML5 Microdata Vocabulary
| PROPERTY | DESCRIPTION |
|---|---|
| Firstname | Defines the first Name of the Player. Required |
| Lastname | Defines the last Name of the Player. Required. |
| Photo | Photo in format JPG, GIF, PNG. |
| Country | Represents the Country player Required |
| Prizemoney | Sum total of Prize Money Won. |
To define our own item in a machine-readable format we can use custom vocabulary at URL:http://schema.org/Review
” item type” attribute Example
<article item scope itemtype="http://schema.org/Review"> <time itemprop=Publisher datecreated="2013-7-14T 22:32:00-06:00"> TheVerge | Sunday, July 14th, 2013</time> ... <span itemprop=editor>Someone</span> <span itemprop=about>The Macbook Air</span> <span itemprop=aggregateRatings> 9.5/10</span> <span itemprop=review> The best Computer for daily Use, simply.</span> </article>
Microdata “itemid” attribute
1. To tag items with unique ID’s, the Microdata attribute itemid attribute is used.
2. The unique IDs are ISBN-International Standard Book Number which is used for books and ASIN-Amazon Standard Identification Number used for Amazon.com products.
3. The value of the attribute must be URL or URN(Uniform Resource Names).
“itemid” attribute Example
<article itemscope itemtype="http://schema.org/Person"> <time itemprop=Publisher datecreated="2013-7-14T 22:32:00-06:00"> TheVerge | Sunday, July 14th, 2013</time> ... <span itemprop=editor>Someone</span><!-- itemid attribute: Amazon Standard Identification Number--><span itemprop=about itemid="urn:ASIN:B000J8VLEC">The Macbook Air</span> <span itemprop=aggregateRatings> 9.5/10</span> <span itemprop=review> The best Computer for daily Use, simply.</span> </article>
Microdata “itemref” attribute
1. In case you cant define all microdata information within one item scope, you can use itemref attribute.
2. The following example the itemscope properties outside the div element are accessed by itemref attribute.
“itemref” attribute Example
<article> <div id=USA> <span itemprop=CompanyUSA>Rockets</span> <span itemprop=CompanyUSA>LehmannBrothers</span> </div><div id=Europe> <span itemprop=CompanyEU>Eurocopter</span> <span itemprop=CompanyEU>EU Bank</span> </div></article> <!-- Attribute itemref uses itemprop property outside the article element --> <div itemscope itemref="CompanyUSA CompanyEU">McDonalds </div>