Custom HTML attributes and jQuery

Question

I am often needing to store little pieces of reference in a page element, most of the time a <div>. I couldn't find too much documentation on how valid it would be to create my own attributes. What do you suggest is the most valid way of doing this or can I even do this? If so, can I just use jQuery's attr() call to get the reference?

example : <div class="sample" dataref="Sample Data Reference"></div>

Answer 1

Use HTML5 data attributes

See: http://api.jquery.com/data/

E.g.

<div class="sample" data-ref="some string" />

Then:

$('.sample').data('ref');