Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 560
questy Avatar asked Jun 22 '13 01:06

questy


People also ask

What is a Data title?

The formal title or name of a cited data source (or a component of a cited data source) such as a dataset or spreadsheet.

What is Data title attribute?

The title attribute is used to specify extra information about the element.

What is data value in HTML?

The HTML data value attribute is used to Specify the machine-readable translation of the content of the element.


2 Answers

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'

like image 176
lloan Avatar answered Oct 10 '22 17:10

lloan


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

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

like image 14
Shaddow Avatar answered Oct 10 '22 17:10

Shaddow