Download as PDF, PPTX
![<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/75/HTML5-data-attributes-7-2048.jpg)
Uploaded byLennart Schoors
HTML5 data attributes
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.
HTML5 data attributes
- 1. HTML5 Data Attributes Lennart Schoors
- 2. The problem . improper/impractical/invaliduse 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 inthe 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 browserthat supports HTML5 doctypes (= all browsers we support) . JavaScript API
- 6. JavaScript API . datasetproperty . 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 ofjQuery 1.4.3 HTML5 data-* attributes will be automatically pulled in to jQuery's data object user.data("city");
- 9. Examples . store parametersfor 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 imageloading . 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 touse 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? Readon at http://lensco.be