What does data-... in a a tag or div tag do

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?

unless you access it or use it, it does nothing. It's just a way of storing data in html in a way that doesn't invalidate your html while possibly being descriptive/expressive. — Kevin B, Jul 09 '13 at 20:42

score 3 · Answer 1 · answered Jul 09 '13 at 20:38

3

They are HTML5 custom data attributes.

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

answered Jul 09 '13 at 20:38

Petah

45,477
28
157
213

score 2 · Answer 2 · answered Jul 09 '13 at 20:38

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

answered Jul 09 '13 at 20:38

Sushanth --

55,259
9
66
105

I don't think using a specialized javascript library here without mentioning it's name is appropriate. It has also nothing to do with the original HTML centric question. – Sven Jul 09 '13 at 21:26
What do you mean by `specialized javascript library ` ? It is just HTML I was referring to – Sushanth -- Jul 09 '13 at 21:27
`$` for sure is no HTML. – Sven Jul 09 '13 at 21:29
aahh.. I see.. you were referring to jQuery .. Op has tagged the question as jQuery .. So did not bother mentioning it – Sushanth -- Jul 09 '13 at 21:31
Thanks for that pointer - fixed. – Sven Jul 09 '13 at 21:39

score 2 · Answer 3 · answered Jul 09 '13 at 20:39

2

It's just an attribute. Instead of setting arbitrary attributes on an element, they added data-*. They can contain whatever you want and have no inherit special meaning.

In jQuery, they can be accessed using .data():

$('.fb-like').data('href')

answered Jul 09 '13 at 20:39

gen_Eric

223,194
41
299
337

1

Ohhh sweet!. So if it was set as data-key, using jquery I can access that value by doing $('.fb-like').data('key') ? – Michael Nana Jul 09 '13 at 20:41
@MichaelNana: Yep :-) – gen_Eric Jul 09 '13 at 21:08

score 1 · Answer 4 · answered Jul 09 '13 at 20:40

1

Data is the good way to add custom attributes to your HTML tags.

You can also acces them with the jquery function .data()

$(element).data('key');//Will get the value of data-key

answered Jul 09 '13 at 20:40

Karl-André Gagnon

33,662
5
50
75

score 0 · Answer 5 · answered Jul 09 '13 at 20:41

0

data-* attributes is a way to attach some information to HTML element.

It doesn't do anything out of the box or affect behavior anyhow. However, it provides standards compliant way to assign some data to element.

answered Jul 09 '13 at 20:41

Alexander Puchkov

5,913
4
34
48

score 0 · Answer 6 · answered Jul 09 '13 at 20:42

0

You can easily get or set the values of data- attributes with jQuery. Examples are shown in the link below.

http://api.jquery.com/jQuery.data/

answered Jul 09 '13 at 20:42

nstears

1

What does data-... in a a tag or div tag do

6 Answers6