HTML5 Tutorial
HTML5 Demo
HTML5 Tools
HTML5 Useful References
HTML5 Tag Reference
HTML5 Resources
Selected Reading
- HTML5 - Web RTC
- HTML5 - Web CORS
- HTML5 - Web Messaging
- HTML5 - IndexedDB
- HTML5 - Web Workers
- HTML5 - Drag & drop
- HTML5 - Microdata
- HTML5 - Geolocation
- HTML5 - Audio & Video
- HTML5 - Canvas
- HTML5 - WebSocket
- HTML5 - Server-Sent Events
- HTML5 - Web SQL Database
- HTML5 - Web Storage
- HTML5 - MathML
- HTML5 - SVG
- HTML5 - Web Forms 2.0
- HTML5 - Events
- HTML5 - Attributes
- HTML5 - Syntax
- HTML5 - Overview
- HTML5 - Home
HTML5 Demo
- HTML5 - Web slide Desk
- HTML5 - Web Worker
- HTML5 - Drag and Drop
- HTML5 - Geo-Location
- HTML5 - Video Players
- HTML5 - Audio Players
- HTML5 - Canvas
- HTML5 - Server Sent Events
- HTML5 - Web Storage
HTML5 Tools
- HTML5 - Color Code Builder
- HTML5 - Online Editor
- HTML5 - Validation
- HTML5 - Modernizr
- HTML5 - Validator.nu Validation
- HTML5 - QR Code
- HTML5 - Velocity Draw
- HTML5 - MathML
- HTML5 - SVG Generator
HTML5 Useful References
- HTML5 - Char Encodings
- HTML5 - Entities
- HTML5 - URL Encoding
- HTML5 - Fonts Reference
- HTML5 - Color Names
- HTML5 - Quick Guide
HTML5 Tag Reference
HTML5 Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
HTML5 - Microdata
HTML5 - Microdata
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>
<span itemscope>
<p>My name is <span itemprop = "name">Zara</span>.</p>
</span>
<span itemscope>
<p>My name is <span itemprop = "name">Nuha</span>.</p>
</span>
</body>
</html>
It will produce the following result −
Properties generally have values that are strings but it can have following data types −
Global Attributes
Microdata introduces five global attributes which would be available for any element to use and give context for machines about your data.
| Sr.No. | Attribute & Description |
|---|---|
| 1 | itemscope This 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. |
| 2 | itemtype This attribute is a vapd URL which defines the item and provides the context for the properties. |
| 3 | itemid This attribute is global identifier for the item. |
| 4 | itemprop This attribute defines a property of the item. |
| 5 | itemref This attribute gives a pst 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 −
<span itemscope> <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint"> </span>
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>
<span itemscope>
My birthday is:
<time itemprop = "birthday" datetime = "1971-05-08">
Aug 5th 1971
</time>
</span>
</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 pke the one psted 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 https://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>
<span itemscope>
<section itemscope itemtype = "http://data-vocabulary.org/Person">
<h1 itemprop = "name">Gopal K Varma</h1>
<p>
<img itemprop = "photo"
src = "http://www.tutorialspoint.com/green/images/logo.png">
</p>
<a itemprop = "url" href = "#">Site</a>
</section>
</span>
</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://datavocabulary.org/Person vocabulary, it parses out those properties and stores them alongside the rest of the page data.
You can test above example using Tool using http://www.tutorialspoint.com/html5/microdata.htm
For further development on Microdata you can always refer to .
Advertisements