[uf-discuss] HTML 5 data- attributes

[LucaP]

I believe this new HTML feature found in the HTML 5 draft
specification should be taken into account in here, since it is
relevant to many ongoing discussions...

via John Resig (jQuery main developer)

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:

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</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:

Using HTML, but with a custom DTD.
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):

var user = document.getElementsByTagName("li")[0];
var pos = 0, span = user.getElementsByTagName("span")[0];

var phrases = [
  {name: "city", prefix: "I am from "},
  {name: "food", prefix: "I like to eat "},
  {name: "lang", prefix: "I like to program in "}
];

user.addEventListener( "click", function(){
  var phrase = phrases[ pos++ ];
  // Use the .dataset property
  span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
}, 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:

span.innerHTML = phrase.prefix +
  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).

http://www.w3.org/html/wg/html5/#custom