HTML data-* 属性

カスタムデータを埋め込むために data-* 属性を使用します：

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>

定義と用法

data-* 属性は、ページまたはアプリケーションのためにプライベートなカスタム・データを格納するために使用します。

data-* 属性は、カスタム・データ属性をすべての HTML 要素に埋め込む機能を提供します。

格納した（カスタム）データは、（Ajax 呼び出しまたはサーバ・サイドのデータベース・クエリを使わずに）ページの JavaScript で使用することにより、魅力的なユーザーエクスペリエンスを作成することができます。

data-* 属性は、次の 2 つの部分から構成されます：

注: 接頭辞が "data-" のカスタム属性は、完全にユーザエージェントによって無視されるます。

表中の数字は、属性を完全にサポートした最初のブラウザ・バージョンを指定しています。

属性
data-*	4.0	5.5	2.0	3.1	9.6

data-* 属性は、HTML5 で新しく追加されました。

<element data-*="somevalue">

値	説明
somevalue	属性の値を (文字列で) 指定する