Hello, world!

HTML 5 Microdata HTML

HTML - Microdata shows how you will identify your own customized elements in the HTML tutorial. By means of this you can begin embedding your custom properties in building web pages.



HTML5 - Microdata

The method to give a standardized syntax for added semantic markup to your web pages is through Microdata.
The HTML5 Microdata allows you to identify your own customized elements and begin embedding custom properties in the content of your web pages.
At a distinctive level, microdata composed of a group of name-value pairs.
Group of name-value pairs are known as items, and every name-value pair is a property.
Items and properties are expressed by regular elements.
 
Example:
The itemscope attribute is needed to make an item.
The itemprop attribute is needed on one of the item's descendants to include a property to an item.
 
This example is two items, both have the property "name":

HTML code example microdata:

<div itemscope>
 <p>Hello, I am <span itemprop="name">Andrew</span>.</p>
</div>
 
<div itemscope>
 <p>Hello, I am <span itemprop="name">Matthew</span>.</p>
</div>

HTML output microdata:

Hello, I am Andrew.

Hello, I am Matthew.



Properties Datatypes

Properties usually contain values that are strings but they can also have values which are link or URLs. Below is an example of one property, "image", which has a URL value:
<div itemscope>
 <img itemprop="image" src="logo.gif" alt="HTML5 Microdata">
</div>
 
In addition properties can contain values that are dates, times, or dates and times. This is attained via the time element and its datetime attribute.
 
<div itemscope>
I was born on:
<time itemprop="birthday" datetime="1982-19-02">
   Feb 19th 1982
</time>
</div>
 
Properties can as well be groups of name-value pairs, by placing the itemscope attribute on the element that states the property.

Global Attributes

Five global attributes launch by Microdata that can be accessible for any element to apply and provide context for machines regarding your data.
itemscope - The itemscope attribute allows you to build an item. This attribute is a boolean attribute that informs that there is Microdata on this page, and this is where it begins.
itemtype - The itemtype attribute is a valid web address or URL that identifies the item and gives the context for the properties.
itemid - The itemid attribute is global identifier for the item.
itemprop - This itemprop attribute identifies a property of the item.
itemref - This itemref attribute provides a list of added elements to crawl to search the name-value pairs of the item.

Microdata API support

There will be a getItems() function on the global document object once HTML5 microdata API is supported by a browser.
The getItems() function will be undefined once browser does not support microdata.
 
function supports_microdata_api() {
  return !!document.getItems;
}
 
The HTML5 microdata standard consists of both HTML markup mainly for search engines and a set of DOM functions mainly for browsers.
Your web pages may contain microdata markup, and will disregard search engines that don't recognize the microdata attributes.
You will require to verify whether the the microdata DOM API is supported in browser, this is when you want to access or control microdata via the DOM.

Microdata Vocabulary

To define microdata vocabulary in HTML5 is simple.
You will need a namespace URL, which essentially point to a working web page.
For instance I need to make a microdata vocabulary that defines a person. If you own the domain address, you can use the URL http://data-vocabulary.org/Person as the namespace for your own microdata vocabulary with the named properties below:    
name - Name of a Person as a simple string
photo - A URL or link to a picture of the person
URL - A link to the website associated to the person

Example of a person microdata using about properties:

HTML code example microdata vocabulary:

<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">Olle Banan</h1>
<p>
<img itemprop="photo" src="https://drive.google.com/uc?id=0B3wdrKlA6ta9rUzRWrSnJzb3VBR2c">
</p>
<a itemprop="url" href="http://www.example.com/blog">My Blog</a>
</section>

Microdata is supported by Google as part of their Rich Snippets program. Once Google’s web crawler parses your page and discovers microdata properties that comply to the http://data-vocabulary.org/Person vocabulary, it parses out those properties and saves them together with the rest of the page data.
Google yet offers a useful tool to observe how Google “sees” your microdata properties.