HTML
データ属性

構文

• <element data-custom-name="somevalue">

パラメーター

データ属性の使用

HTML5のdata-*属性は、HTML要素にデータを格納する便利な方法を提供します。保存されたデータは、JavaScriptを使用して読み込みまたは変更できます

<div data-submitted="yes" class="user_profile">
  … some content …
</div>

• データ属性の構造はdata-* 。つまり、データ属性の名前はdata-部分の後に来ます。この名前を使用すると、属性にアクセスできます。

• 文字列形式のデータ（ jsonを含む）は、 data-*属性を使用して格納できます。

古いブラウザのサポート

最新のすべてのブラウザでサポートされているHTML5にデータ属性が導入されましたが、HTML5より前の古いブラウザではデータ属性が認識されません。

ただし、HTML仕様では、ブラウザで認識されない属性は残しておかなければならず、ブラウザはページのレンダリング時に無視します。

Web開発者はこの事実を利用して、HTML仕様の一部ではない属性である非標準属性を作成しています。たとえば、 <img>タグの指定にvalue属性がなく、グローバル属性ではないため、bellow行のvalue属性は非標準属性と見なされます。

<img src="sample.jpg" value="test" />

つまり、古いブラウザではデータ属性はサポートされていませんが、引き続き機能し、同じ汎用のJavaScript setAttributeメソッドとgetAttributeメソッドを使用して設定および取得できますが、現代のブラウザでのみサポートされる新しいdatasetプロパティは使用できません。