what is the purpose and usage of data-value, data-title, data-original-title, original-title, etc.?

Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:

 <li class="user" data-name="John Resig" data-city="Boston"
        data-lang="js" data-food="Bacon">
      <b>John says:</b> <span>Hello, how are you?</span>
    </li>

From : Ejohn.org 'Not sure about the external link policy, just putting it in here in case someone wants to know'

HTML5 data-* attribute is used for storing data in element

For manipulating with this attribute you can use jQuery.data() or .data() methods.

The main point is that data- attributes will not clash with attributes that may added to HTML later or with browser-specific attributes. The idea is to give an author a playground, a name space where he can use attributes for private purposes without fear of having them ever interpreted as standard or vendor-defined attributes in some different meaning.

According to this idea, search engines and assistive software ignore such attributes, as they have no interoperable meaning.