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.

  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.

  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).

  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.

  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

  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.

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

  8. Hi, would this html data attribute backwards compatible? Would it be accessible to the DOM in IE6?

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

  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.

  11. @Jordan The variable baz would be given the value ‘bar’; I’ll edit this post later if you think that’s unclear.

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

  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)

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

  15. i cant get this to work for some strange reason. whats the jquery script required.. overall thanks for the nice article