HTML5 data attributes

HTML5 data attributes are a very simple way to show an often changing value of a certain screen element without having to create a lot of HTML and DOM references.

[JamesKingGrumpyMiyagi]

Excellent demonstration, Mr. Heilmann. I got here, of course, through the link on MDN's _Using data attributes_ page. I can see why your screencast was selected for the demo.

[buendia]

Thank you, this was super helpful and even for a beginner like me, the potential usefulness of data attributes is awesome to behold.

I have a question if that's okay - the MDN docs seem to suggest that we shouldn't use this for visible elements - I'm recreating the Instagram feed and thought to attach the 'likes' counter for each post onto a data attribute, the value of which is modified by a value in an object (containing the data for each of the posts) - would this be okay?

[RomanBorowinski]

If I would use this to manipulate content on page, would this be faster in terms of repainting? Faster than, lets same innerHTML?

[audrey-vale]

Bro, no way the best tutorial is a super old aah video.

[colindante]

i know this is off topic but my understanding of giving the sprite relative positioning ( position:relative) is so the score could position itself to it (it would position itself to the nearest parent element). However, when you get a moment could you kindly explain why the sprite needs to be offset (top:50px; left:50px) when it could have been done using back-ground positioning? (back-ground position: x y) Thankyou much.

[justinli]

do you mind if i ask, what software you are using?