html - 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?

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>