HTML 5 data- Attributes


A new feature being introduced in HTML 5 is the addition of custom data attributes. This is a, seemingly, bizarre addition to the specification – but actually provides a number of useful benefits.

Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:

  1. <li class="user" data-name="John Resig" data-city="Boston"
  2.     data-lang="js" data-food="Bacon">
  3.   <b>John says:</b> <span>Hello, how are you?</span>
  4. </li>

The above will be perfectly valid HTML 5. This should be a welcome addition to nearly every JavaScript developer. The question of the best means of attaching raw data to HTML elements – in a valid manner – has been a long-lingering question. Frameworks have tried to deal with this in different manners, two solutions being:

  1. Using HTML, but with a custom DTD.
  2. Using XHTML, with a specific namespace.

The addition of this prefix completely routes around both issues (including any extra markup for validation or needing to be valid XHTML) with this effective addition.

On top of this a simple JavaScript API is presented to access these attribute values (in addition to the normal get/setAttribute):

  1. var user = document.getElementsByTagName("li")[0];
  2. var pos = 0, span = user.getElementsByTagName("span")[0];
  3.  
  4. var phrases = [
  5.   {name: "city", prefix: "I am from "},
  6.   {name: "food", prefix: "I like to eat "},
  7.   {name: "lang", prefix: "I like to program in "}
  8. ];
  9.  
  10. user.addEventListener( "click", function(){
  11.   var phrase = phrases[ pos++ ];
  12.   // Use the .dataset property
  13.   span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
  14. }, false);

The .dataset property behaves very similarly to the the .attributes property (but it only works as a map of key-value pairs). While no browsers have implemented this exact DOM property, it’s not hugely needed – the above code could be done with the critical line replaced with:

  1. span.innerHTML = phrase.prefix +
  2.   user.getAttribute("data-" + phrase.name );

I think what is most enticing about this whole specification is that you don’t have to wait for any browser to implement anything in order to begin using it. By starting to use data- prefixes on your HTML metadata today you’ll be safe in knowing that it’ll continue to work well into the future. The time at which the HTML 5 validator is integrated into the full W3C validator your site will already be compliant (assuming, of course, you’re already valid HTML 5 and using the HTML 5 Doctype).

Posted: July 13th, 2008


If you particularly enjoy my work, I appreciate donations given with Gittip.

45 Comments (Show Comments)



Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Ukiyo-e Database and Search

Ukiyo-e.org

Japanese woodblock print database and search engine.


John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.