HTML5 data attributes
7 likes11,142 views
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.
![<span data-city="Gent">lensco</span>
var user = document.getElementsByTagName("span")[0];
user.dataset["city"]; // not supported yet!
user.getAttribute("data-city"); // fallback](https://image.slidesharecdn.com/html5dataattributes-110105082555-phpapp02/85/HTML5-data-attributes-7-320.jpg)
HTML5 data attributes
- 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