Data Attributes in HTML and jQuery

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

Sometimes the existing HTML attributes aren’t sufficient for describing an element’s content. We can use class, ref, rel, title and more, but even so there are occasions where that’s not enough. HTML5 addresses this problem with the introduction of Data Attributes, which allow you to add simple metadata to individual elements, largely for the purpose of providing information to make JavaScript functions easier.

The syntax is a key:value pair, with the key being a keyword prefixed with data-, like so:

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

Note that this is not intended to compete with or replace Microformats or RDFa; data attributes were developed only to store custom data [about an element] when there is no more appropriate attribute or element available.

jQuery introduced support for data attributes in version 1.4.3, which was released in October 2010. You use the existing data() method to get and set values. Getting a value involves just using the keyword, as in this example which operates on the markup above:

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

This would set the value of ‘bar’ to the baz variable. jQuery’s implemenation is so clever that the variable will take on the correct value type — string, number, boolean — automatically. In the example above it would be a string, but given markup like this:

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

The value of the variable would be provided as a number type. You can also use JSON syntax in data attributes, like so:

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

Note that the attribute uses single quotes while the key:value pair inside are in double quotes; this is required to be valid JSON syntax. 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 variable baz to have the value ‘bar’.

15 comments on
“Data Attributes in HTML and jQuery”

  1. your website headings cannot 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 Firefox, 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 screenshot of your site in Chrome dev in Win XP SP3. http://twitpic.com/38wy4k/full Strangely, it looks fine in Windows 7 (same Chrome).

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

  4. Thanks Dan; it looks as if there could an issue with a locally stored version of the font. I’ve changed the @font-face syntax, so try refreshing and see if the problem’s resolved.

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

  5. Hey there. I’ve just refreshed my cache and, sadly, it’s worse. Now the text simply doesn’t display 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 encoded; I’ve re-encoded 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 backwards compatible? Would it be accessible to the DOM in IE6?

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

  9. @Neil — Yes, it’s backwards compatible; I’ve already used them on a few sites I’ve built.

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

  10. Peter,

    “This would set the value of ‘bar’ to the baz variable.”

    Are you sure you don’t mean the opposite?

    “This would set the value of ‘baz’ to the bar variable.”

    OR

    This would GET the value of ‘bar’ to the baz variable.

    $(‘div’).data(‘foo’); looks like a getter to me… and you’re assigning it to baz.

    All the best and thanks.

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

  11. @Jordan The variable baz would be given the value ‘bar’; I’ll edit this post later 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 Attributes are property of the elements which may have values and these attribute values are always enclosed in quotes. It’s providing to the browser with some additional information about an elements how the elements should appear or behave. HTML elements can contain one or more attributes, attribute names and attribute values are case-insensitive and separated by an equals (=) sign.

    [HTML Attributes](http://www.willvick.com/HTML/HTMLAttribute.aspx)

    [HTML Attributes Examples](http://www.willvick.com/HTML/HTMLExampleAttribute.aspx)

    [Youtube — HTML Tutorial — Attributes](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 reason. whats the jquery script required.. overall thanks for the nice article

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