The right way to do it is to use data-* attributes:
Tangentially, jQuery has a special method for working with these as well. For example:
<p id='string' data-user_name='thedude'></p>
$('#string').data('user_name') => "thedude"
typeof $('#string').data('name') => "string"
<p id='number' data-user_id='12345'</p>
typeof $('#number').data('user_id') => "number"
<p id='boolean' data-user_is_active='true'></p>
typeof $('#boolean').data('user_is_active') => "boolean"
<p id = 'json' data-user='{"name": "the dude", "id": "12345"}'></p>
typeof $('#json').data('user') => "object"
// embedding JSON is extremely useful in my experience