Using HTML5 Data Attributes to Write Clean Code

When you want to pass some data from HTML to Javascript what do you do? Before HTML5 data attributes this was a mess. Everyone had their own hacky solution.

For example, if you’re implementing the ‘Like’ feature for status updates you need to know the ID of the status update that was clicked. You can store the ID in a hidden element. You can store the ID in an arbitrary attribute. In javascript you have to read the attribute and maybe even parse it.

The code can get messy and confusing especially if you need to pass multiple IDs. You end up defining your own format for passing the data.

Data Attributes to the Rescue

A surprising amount of people don’t use HTML5 data attributes. It’s a simple and standard way to pass any data you need from HTML to javascript. You can create as many custom attributes as you want. You just need to prefix it with “data-”.

Sample HTML:
<div class="status-update" data-id="46">
Some content...
</div>


In JQuery you can easily read in the id:
$(this).data('id');


What are some ways you pass data through?