spanタグにデータ属性を持たせる

railsでhtmlに値をもたせたいと思ってhidden_field_tagを利用して実装しようとしたが、タグにdata属性として渡したほうがいいというアドバイスをもらったのだが、data属性ってなに？どうやるの？？ってなったのでメモします。
やりたかったこととしては、HTMLに値をもたせておいて、それをJavaScriptでとってきて、cookieに保存すること。

data属性って？

以下のようにhtmlタグの中に書く。
data-*
data属性：適切な属性や要素がない場合にページやアプリケーションに固有の独自データを格納する。全ての HTMLにたいして独自のデータ属性をいくつでも、どんな値でも作れる。参考
つまり、ザックリ言うと

オールマイティーな属性

と、私は納得しました（全然わかってないかもw）

じゃあどう書けばいいの？

初めは
<%= hidden_field_tag '' , VALUE, { :class => hoge } %>
という感じで書いていました。
しかし、こんな面倒なことしなくてもよいという指摘をうけ、
<span class="hoge" data-sample="<% VALUE %>"・・・①
と書きました。railsのhiddenタグにdataオプションないよ・・・VALUEの値はコントローラーで渡されたものいれてeachでまわしたいんだよ・・・と思っていたら考えすぎていましたが、上記のように簡単にかけました。
（新卒あるある）

じゃあJavaScriptでdata属性としてもたせたものを使うには？

そして次なる壁はJSで使うこと。JQueryを利用すると

id属性の時：$('#sample')
class属性の時：$('.sample')
data属性の時：$('.sample').data('sample')

というような対応でかけます。上記のdata属性の部分は①と対応しています。
data属性の場合は、「どこどこclassのdataを持ってきてね」と書く感じかな。

まとめ

HTMLにdata属性を使う時は
<span class="CLASS-NAME" data-DATANAME="<% VALUE %>"
data属性をJSで使う時は
$('.CLASS-NAME').data('DATANAME')