Data Attributes in HTML and jQuery

Warning This article was written over six months ago, and may contain outdated information.

Some­times the exist­ing HTML attrib­ut­es aren’t suf­fi­cient for describ­ing an ele­men­t’s con­tent. We can use class, ref, rel, title and more, but even so there are occa­sions where that’s not enough. HTML5 address­es this prob­lem with the intro­duc­tion of Data Attrib­ut­es, which allow you to add sim­ple meta­da­ta to indi­vid­ual ele­ments, large­ly for the pur­pose of pro­vid­ing infor­ma­tion to make JavaScript func­tions easier.

The syn­tax is a key:value pair, with the key being a key­word pre­fixed with data-, like so:

<div data-foo="bar"></div>

Note that this is not intend­ed to com­pete with or replace Micro­for­mats or RDFa; data attrib­ut­es were devel­oped only to store cus­tom data [about an ele­ment] when there is no more appro­pri­ate attribute or ele­ment avail­able.

jQuery intro­duced sup­port for data attrib­ut­es in ver­sion 1.4.3, which was released in Octo­ber 2010. You use the exist­ing data() method to get and set val­ues. Get­ting a val­ue involves just using the key­word, as in this exam­ple which oper­ates on the markup above:

var baz = $('div').data('foo');

This would set the val­ue of ‘bar’ to the baz vari­able. jQuery’s imple­me­na­tion is so clever that the vari­able will take on the cor­rect val­ue type — string, num­ber, boolean — auto­mat­i­cal­ly. In the exam­ple above it would be a string, but giv­en markup like this:

<div data-retail="3.99"></div>

The val­ue of the vari­able would be pro­vid­ed as a num­ber type. You can also use JSON syn­tax in data attrib­ut­es, like so:

<div data-foobar='{"foo":"bar"}'></div>

Note that the attribute uses sin­gle quotes while the key:value pair inside are in dou­ble quotes; this is required to be valid JSON syn­tax. To access this with jQuery, just add the key name as an object at the end of the string:

var baz = $('div').data('foobar').foo;

This will once again instruct the vari­able baz to have the val­ue ‘bar’.

15 comments on
“Data Attributes in HTML and jQuery”

  1. your web­site head­ings can­not be read in some browsers. maybe you want to fix this.

    nick [November 19th, 2010, 16:47]

  2. @nick: Which browsers do you mean? I’ve checked in Fire­fox, Safari, Chrome & IE. Are you using IE7? There was a colour issue I’ve resolved for that.

    Peter [November 19th, 2010, 17:04]

  3. Hey Peter, I sent you a tweet and screen­shot of your site in Chrome dev in Win XP SP3. http://twitpic.com/38wy4k/full Strange­ly, it looks fine in Win­dows 7 (same Chrome).

    Dan Atkinson [November 21st, 2010, 16:52]

  4. Thanks Dan; it looks as if there could an issue with a local­ly stored ver­sion of the font. I’ve changed the @font-face syn­tax, so try refresh­ing and see if the prob­lem’s resolved.

    Peter [November 21st, 2010, 22:05]

  5. Hey there. I’ve just refreshed my cache and, sad­ly, it’s worse. Now the text sim­ply does­n’t dis­play at all :S. — http://twitpic.com/394ah8/full

    Dan Atkinson [November 22nd, 2010, 10:29]

  6. Seems to have been the way that the font was encod­ed; I’ve re-encod­ed using http://fontsquirrel.com and all seems fine now.

    Peter [November 22nd, 2010, 11:09]

  7. Yup, that’s fixed it! Thanks!

    Dan Atkinson [November 22nd, 2010, 11:14]

  8. Hi, would this html data attribute back­wards com­pat­i­ble? Would it be acces­si­ble to the DOM in IE6?

    Neil Osman [February 23rd, 2011, 19:40]

  9. @Neil — Yes, it’s back­wards com­pat­i­ble; I’ve already used them on a few sites I’ve built.

    Peter [February 23rd, 2011, 19:51]

  10. Peter,

    “This would set the val­ue of ‘bar’ to the baz variable.”

    Are you sure you don’t mean the opposite?

    “This would set the val­ue of ‘baz’ to the bar variable.”

    OR

    This would GET the val­ue of ‘bar’ to the baz variable.

    $(‘div’).data(‘foo’); looks like a get­ter to me… and you’re assign­ing it to baz.

    All the best and thanks.

    Jordan Arseno [July 8th, 2011, 08:39]

  11. @Jordan The vari­able baz would be giv­en the val­ue ‘bar’; I’ll edit this post lat­er if you think that’s unclear.

    Peter [July 8th, 2011, 10:10]

  12. […] Html5 data attribute      2nd part […]

    Links « Frackmente [June 25th, 2012, 23:00]

  13. HTML Attrib­ut­es are prop­er­ty of the ele­ments which may have val­ues and these attribute val­ues are always enclosed in quotes. It’s pro­vid­ing to the brows­er with some addi­tion­al infor­ma­tion about an ele­ments how the ele­ments should appear or behave. HTML ele­ments can con­tain one or more attrib­ut­es, attribute names and attribute val­ues are case-insen­si­tive and sep­a­rat­ed by an equals (=) sign.

    [HTML Attrib­ut­es](http://www.willvick.com/HTML/HTMLAttribute.aspx)

    [HTML Attrib­ut­es Exam­ples](http://www.willvick.com/HTML/HTMLExampleAttribute.aspx)

    [Youtube — HTML Tuto­r­i­al — Attrib­ut­es](http://www.youtube.com/watch?v=ucOXvaCEZgg)

    Vick Sa [April 12th, 2013, 15:47]

  14. Very nice and easy explained… In short: a good read to be enlighted :)

    Erik [June 4th, 2013, 09:49]

  15. i cant get this to work for some strange rea­son. whats the jquery script required.. over­all thanks for the nice article

    aisha [June 30th, 2013, 12:07]