HTML 5 data Attributes

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:

HTML5的自定义属性看起来不是很重要，但是实际上它在以后的前端开发中将会频繁的使用。在HTML5中定义一个自定义属性非常简单：你只要使用以’data-’开头，后面加上任意字符即可定义一个自定义属性（记住必须以data-为前缀！），自定义属性将充当一个私有的数据存储区域（用户无法看到开发者定义的属性，它也不会影响页面的布局）。

HTML5允许你编写一个有效的、可验证的自定义属性（通过HTML5的验证），同时又可以嵌入数据在你的页面中。一个快速的方法如下：

<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).

via:http://ejohn.org/blog/html-5-data-attributes/