Hidden inputs vs HTML5 data attributes

Because data attributes are new, I don't think there is a real consensus yet about when they are appropriate or what best practices are. My personal feeling if that they make a lot of sense when you are attaching data to DOM elements further down in the page because they logically go along with those DOM elements. When you are looking at using them on the body tag I wonder why you are not keeping those values in regular javascript variables. I suspect that you would have better performance using regular javascript variables. All of these variables would be easily viewed in Firebug, etc. so its unlikely that one is more or less secure in that sense.

Regarding the initial page state, it sounds like you could probably put the javascript variable directly into the page instead of into a hidden field with the way you are using it. If you were posting a form to the server, the hidden element could be useful there, that is what hidden elements were designed for.

Its a good open question as to what best practices are on this.

In a nutshell a data attribute can be attached to the element that is described by the attribute where areas the hidden input can't be inside another DOM element and its use is limited to forms (In good practices anyway). The hidden input is an actual DOM element while the data attribute is well... that an attribute, so it can be bound to a DOM element. That for the most part it but if you need more info and maybe an example keep reading, I warn you it's kinda long and english is not my native language.

Basically the data attribute was created to add extra information to DOM elements, that can't be otherwise attached to it with the existing attributes such as class or the good old id.

This affects mostly web based apps or more specifically Saas', for which the need of data driven attributes is far more extensive than a regular website(even with a CMS behind it).

I used to day dream about this attribute many years ago, when you only had 2 choices:

1. Use the html attributes for something that they we're not
   originally created or designed
2. Use the html attributes with tokens in them, to decode them with client-side or a server-side function (split,splice,explode)

The problem with this approach is that no matter how you look at it, you are not using the html attributes they way they're meant and designed to be used.

Html is a markup language so it doesn't naturally have data driven attributes that you can't work with to manipulate data processing and behavior.

The basic scenario that I had then is that I wanted to have a single jQuery Dialog to load all the data entry forms (clients,products,suppliers,etc) Each form with different width and height. That way the client-side script would be much smaller and I would need to add a new dialog for every new form that was added to the app requested by the client.

This is how I used to do it before the data attribute came along:<