HTML5 data attributes provide a way to store custom private data with elements without following existing standards. The data- prefix is used to attach arbitrary data to elements through attributes like data-age and data-target. This private data does not affect layout or presentation and is intended for use by site scripts, not as a public extension. Browsers that support HTML5 doctypes will support data attributes through the dataset property in JavaScript, though getAttribute may need to be used instead for some browsers. Data attributes can be used to store parameters, heights, or other values needed by JavaScript.

1. HTML5
Data Attributes
Lennart Schoors

2. The problem
. improper/impractical/invalid use of
HTML attributes
. rel="ajax" or rel="dialog"
. class="ignore-proxy"
. custom attributes with custom DTD

3. The solution: data-* attributes
. “Custom data attributes are intended to
store custom data private to the page or
application, for which there are no more
appropriate attributes or elements”
. at least one character after the hyphen
<span data-age="29">lensco</span>
<a href="/foo" data-target="dialog">bar</a>
http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

4. . private in the sense that the end user
can't see it - it doesn't affect layout or
presentation
. intended for use by the site's own scripts,
not a generic extension mechanism for
publicly-usable metadata

5. Support?
. any browser that supports HTML5
doctypes (= all browsers we support)
. JavaScript API

6. JavaScript API
. dataset property
. very similar to the the attributes property
. but: not implemented yet, so ...
. use getAttribute & setAttribute

7. <span data-city="Gent">lensco</span>
var user = document.getElementsByTagName("span")[0];
user.dataset["city"]; // not supported yet!
user.getAttribute("data-city"); // fallback

8. jQuery
. As of jQuery 1.4.3 HTML5 data-* attributes
will be automatically pulled in to
jQuery's data object
user.data("city");

9. Examples
. store parameters for a Flash movie that’s
loaded via JavaScript
. store the initial height or opacity of an
element which might be required in later
JavaScript animation calculations
. tracking traffic
http://html5doctor.com/html5-custom-data-attributes
http://jasonkarns.com/blog/2010/03/10/google-analytics-tagging

10. Example: lazy image loading
. Flickr: data-defer-src
. "any image that doesn’t need to be loaded
straight away, including avatars and map
tiles"
. but: "It’s worth noting that on Flickr we’ve
disabled this type of image deferral for
IE6, 7 and 8."
http://24ways.org/2010/speed-up-your-site-with-delayed-content
http://24ways.org/2010/speed-up-your-site-with-delayed-content#c007948

11. When not to use it
. not intended to compete with
microformats (public data)
. not if there is an existing attribute or
element which is more appropriate
. don't use as a CSS hook for styling

12. That’s all folks!
Questions?
Read on at http://lensco.be