HTML リファレンスマニュアル

HTML タグ一覧

HTML data-*属性

data-* グローバル属性は、カスタムデータ属性と呼ばれるもので、すべてのHTML要素にカスタムデータ属性を埋め込む能力を持ち、スクリプト（主にJavaScript）を通じてHTMLと間で特別なデータの交換ができます。

オンラインサンプル

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

サンプル

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本トレーニング(oldtoolbag.com)</title>　
<script>
function　showDetails(animal)
{
　　　　var　animalType　=　animal.getAttribute("data-animal-type");
　　　　alert("The　"　+　animal.innerHTML　+　"　is　a　"　+　animalType　+　".");
}
</script>
</head>
<body>
<h1>種</h1>
<p>クリックして、その種のタイプを見てみましょう：</p>
<ul>
　　<li　onclick="showDetails(this)"　id="owl"　data-animal-type="bird">Owl</li>
　　<li　onclick="showDetails(this)"　id="salmon"　data-animal-type="fish">Salmon</li>　　
　　<li　onclick="showDetails(this)"　id="tarantula"　data-animal-type="spider">Tarantula</li>　　
</ul>
</body>
</html>

テストを見てみる ‹/›

ブラウザ互換性

IEFirefoxOperaChromeSafari

すべての主要ブラウザが data-* 属性。

定義と使用法

data-* 属性は、ページの後で使用するためのプライベートなカスタムデータを保存するために使用されます。

data-* 属性はすべてのHTML要素にデータを埋め込むことができます。

カスタムデータはページにより良いインタラクション体験を提供できます（Ajaxを使用せずにデータをサーバーから取得する必要はありません）。

data-* 属性は以下の二つの部分で構成されています：

属性名は大文字を含めないで、data- の後に少なくとも一文字必要です。
この属性は任意の文字列でできます

注意： カスタム属性プレフィックス "data-" はクライアントで無視されます。

HTML 4.01 と HTML5の間の違い

data-* 属性は HTML5 追加された。

文法

<element data-*="somevalue">

属性値

値	説明
somevalue	指定された属性値（文字列が一つ）

HTMLグローバル属性

HTML: <template> タグ