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

Question

I've been seeing these attributes around on more modern websites like GitHub and such, and they always seemed to coincide with a customized popover like the title attribute.

<a href="/" data-value="hovering message">Option 1</a>
<a href="/" data-title="hovering message">Option 2</a>
<a href="/" data-original-title="hovering message">Option 3</a>
<a href="/" original-title="hovering message">Option 4</a>

I read some documents about data- attributes on HTML5 Doctor, and I'm not quite sure of the point.

Is there some SEO or accessibility benefit to using them? And what is the plugin(hopefully jQuery) commonly being used to create the popovers in this specific case?

Augment

Are u using bootstrap? – Manslayer

No, I'm using my own css and js. – Augment

Answer 1

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'

Pow

Answer 2

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

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

Concelebrate

Answer 3

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.

Arlettearley