In the HTML5 spec the custom data attributes are clearly defined for use for in your own application.
These attributes are not intended for use by software that is independent of the site that uses the attributes.
When you want to show a sequence of entries you have to loop through your data twice (in the header section and the body) or you build up PHP-arrays or strings of doom. No matter which solution you chose it won’t have anything to do with clean templating.
There’s also the possibility to load your data with AJAX, which is absolutely valid when you render your templates in the frontend. But as soon as you use AJAX your application is stateful and you have to deal with the impacts like loading and waiting.
There’s also the possibility to save the data in other attributes and there are also some that fit semantically like title or href, but most of your data won’t fit in a standard attribute.
A clean representation might look like this:
<a title="John Doe" href="#john-doe" data-id="7" data-eye-color="blue">John Doe</a>
When you implement a dynamic web application you always need to select elements. Modern Browsers support query selectors like jQuery or other frameworks do. Usually you use ids for selecting certain elements and classes for a set of them. Using classes is a really bad habit as they should be used for styling the elements only. It is possible to separate classes for logic and style but it is very very likely you mess them up.
var $itms = $('.itm');
<ul><li class="itm">A</li><li class="itm">B</li></ul>
var $itms = $('.itm');
<ul><li class="blue itm">A</li><li class="blue itm">B</li></ul>
var $itms = $('[data-itm]');
<ul><li class="blue" data-itm>A</li><li class="blue" data-itm>B</li></ul>
You need to be aware that those selectors are slower than class names and you may return to class names when your application gets slow, but this solution may fit most of your needs. It may also help to save your elements in vars as long as you work with a reference of them.
There is always the question where the data should be saved. There is data that could be saved in your DOM-element, like position, but others may be saved in an array or object.
By using data-*-attributes your data is where it belongs, on your element, also the transition is seemless. As you could pass your initial data from your server to the frontend.
<div data-box data-x="5" data-y="7"></div>
Use those attributes now! Your coding style will improve and the result will be much better.
What i need now is syntax highlighting that distinguishes between attributes for representation and logic.
Also read this article, which gives further information on the speed of the selectors, also by @roy (thx @jayeff) http://roytomeij.com/2012/follow-up-don-t-use-class-names-to-find-html-elements-with-js.html