HTML5のカスタムデータ属性とは何ぞ

<html>
<script>
function test(){
  button = document.getElementById('button1');
  alert(button.dataset.x);
}
</script>

<body>
<input id="button1" type="button" onClick="test()" data-x="testtest">
</body>
</html>

カスタムデータ属性。よくわからなかったのだが、イマドキはこういうものを使って、CSSJQueryなどに値を渡す必要がでてくる。
上の例でいうと、inputタグの末尾のdata-xの部分がそうだ。data-の後に好きな名前を付ける。data-xならxという名前だ。
例では3行目から6行目までがJavascriptだ。その中身はtest()という関数になっている。
10行目でtype="button"のinputタグによってボタンを表示している。このボタンはクリックされたときの動作がある。onClick=で"test()"と
記入したのでtest()というJavascriptの処理がそれである。これによってクリック時には3行目から書かれたtest()の処理が実行される。
中身はbutton1というIdで指定された要素(この場合はinputタグにbutton1が設定されている)のxと名づけられたカスタムデータ属性の中身を表示する、という処理だ。
結果として、アラートで「testtest」が表示される。