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â.
your webÂsite headÂings canÂnot be read in some browsers. maybe you want to fix this.
nick [November 19th, 2010, 16:47]
@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]
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]
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]
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]
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]
Yup, thatâs fixed it! Thanks!
Dan Atkinson [November 22nd, 2010, 11:14]
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]
@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]
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]
@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]
[âŚ] Html5 data attribute 2nd part [âŚ]
Links « Frackmente [June 25th, 2012, 23:00]
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]
Very nice and easy explained⌠In short: a good read to be enlighted :)
Erik [June 4th, 2013, 09:49]
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]