HTML5 「カスタムデータ属性」

http://d.hatena.ne.jp/Naotsugu/20111007/1317994886
http://memo.yomukaku.net/entries/136
HTML4以前は正式な仕様としては、htmlタグに本来存在しない属性を埋め込むことは禁止されていた。
しかし、HTML5で"data-"というプレフィクスを持つ属性はユーザが自由に埋め込んでも問題ないことになった。
また、この属性はjQuery.data()によって扱う事ができる。(jQuery1.4.4以降)

例:
<span data-short="short name">long name</span>

<script>
$("span").click(function(){
    $(this).text( $(this).data().short );
    // $(this).data("short") でもok
    // もちろん $(this).attr("data-short") でも扱える
});
</script>



http://www.webopixel.net/javascript/414.html
さらに、カスタムデータ属性の値としてjsonを入れておくと、jQueryは勝手にオブジェクトに展開してくれる。

<div data-role='{"voice":"こんにちワン", "age":"12"}'>太郎</div>
$('div').data('role').voice;



http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/html5-data-attributes-vs-jquery-data-api/