What does data-... in a a tag or div tag do [duplicate]

Question

I've been looking at some apis and plugins and I've been seeing plugins that look like this

<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-send="true" data-width="450" data-show-faces="true"></div>

or

<a class="bistri-button" data-key="871b7d8f839e9cdbfc6dcc87b6932889feae334d8fbc2862"></a>

What does dat-key or data-send represent ? How do you use it? Is it a way to send data to the javascript file handling the request? Then how can you handle it in the javascript file?

Answer 1

They are HTML5 custom data attributes.

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#custom-data-attribute

Answer 2

data-* attributes are HTML-5 custom attributes

Names that are not default attribute names can be used by prepending the data- to make the HTML valid.

They can be retrieved by either using

$('.fb-like').attr('data-key')

or

$('.fb-like').data('key') // This is more appropriate