HTML5のカスタムデータ属性（data-*）の作成方法と使い方

HTML5カスタムデータ属性とは

HTML5で新たに導入された注目すべき機能の一つが、「カスタムデータ属性（data-* 属性）」です。これにより、開発者はHTML要素に対して独自の情報を自由に持たせることができるようになりました。

カスタムデータ属性は必ず接頭辞「data-」で始まり、その後の名前は用途に合わせて自由に決めることができます。

基本的な書き方

<div class = "example" data-sports = "cricket" data-level = "complex">
    ...
</div>

上記のコードは、data-sports と data-level という2つのカスタム属性を持つ、完全に有効なHTML5です。このように書くことで、マークアップの意味を壊さずに、要素ごとの補足情報を埋め込むことができます。

命名時の注意点

• 属性名は必ず「data-」から始めます
• 英字はすべて小文字で記述します（大文字は使用できません）
• 単語をつなぐ場合はハイフン（-）を使用します（例：data-user-name）

JavaScriptやCSSからの利用方法

カスタムデータ属性の値は、標準属性とまったく同じ要領で取得・操作できます。

JavaScriptでは getAttribute メソッド、またはより便利な dataset プロパティが使えます。

// getAttribute を使う場合
const value = element.getAttribute('data-sports');

// dataset を使う場合
const value = element.dataset.sports;

CSSでも属性セレクタを用いてスタイルを適用できます。

[data-level="complex"] {
  color: red;
}

このように、カスタムデータ属性を活用すれば、JavaScriptと連携した動的な処理や、状態に応じたスタイル制御を、セマンティックかつシンプルに実装することが可能になります。