Html5 and data-* attributes?

custom-data-attribute, html, javascript, jquery

Solution

You could use this :

<li class="user" data-user='{"name":"Royi Namir", "city":"Boston", "lang":"js", "food":"Bacon"}'> </li>

And then

var user = JSON.parse(element.dataset.user);

Using jQuery, it's even simpler :

var user = $(element).data('user');

And if you want to get all your users :

var ​users = $('[data-user]').map(function(){return $(this).data('user')});

There would be less redunduncy and a directly usable structure, especially with deeper properties. Data attributes aren't only for strings.

But the main point about `data-` attributes is to normalize a practice. Now it's clear when looking at the HTML, what attributes are standard HTML (view) attributes and what attributes are data ones (specific to your application logic).

Problem

With all the respect to Html5 data attribute When I have a code like this: ``` <li class="user" data-name="Royi Namir" data-city="Boston" data-lang="js" data-food="Bacon"> </li> ``` I'm adding quite a lot of redundant chars into the document. I only need this type of `data-XXX` in order to do : `myDomElement.dataset[xxx];` However , I could easily do this ``` <li class="user" dn="Royi Namir" dc="Boston" dl="js" df="Bacon"> </li> ``` Without those extra `data-` prefixes (and save me a lot of extra chars). and to read it via "start with " selector like [d^] – jQuery API Am I missing something here ?

Original source