Question

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 ?

Answer 1

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