data要素は表示する文字と機械可読値をvalue属性で対応させる

HTML5のdata要素は、利用者に見せる文字と、programが扱う値を一つに結び付けるために使います。見える文字は要素の内容へ書き、その内容を表す機械可読値は必須のvalue属性へ入れてください。

商品名と商品codeのように、人には名称を見せ、処理には一定の識別子を渡したい場合に使えます。日付や時刻にはdata要素ではなく、用途が限定されたtime要素を選びます。

data要素は内容とvalue属性を一組にする

HTML5 Recommendationのdata要素に関する定義では、data要素の内容と、その機械可読な表現をvalue属性で対応させます。value属性は省略できません。

次は説明用の仮例です。

<p>交換部品：<data value="SKU-001">交換用フィルター</data></p>

利用者には「交換用フィルター」と見せ、scriptにはSKU-001という識別子を渡せます。value属性が見える文字を置き換えて表示するわけではありません。画面へ見せる名称は開始tagと終了tagの間へ書きます。

value属性へ何を入れてもよいわけではありません。要素の内容を表す値として、利用側のprogramが解釈できる形式を決めます。商品codeを使うなら、同じ商品へ複数のcodeを場面ごとに付けないでください。

日付と時刻にはtime要素を使う

値が日付や時刻に関係する場合は、より具体的なtime要素を使えます。

<p>受付期限：<time datetime="2015-08-31">2015年8月31日</time></p>

data要素のvalue属性は一般的な機械可読値を扱います。time要素のdatetime属性は、日付、時刻、時間帯、期間に対応する構文を持ちます。どちらも表示文と機械可読値を対応させますが、値の意味が日時ならtime要素を先に選んでください。

金額、商品code、日時をすべてdata要素へ統一すると、利用するsoftwareが値の意味を別の情報から推測しなければなりません。用途に合う専用要素があるかを先に調べます。

data要素とdata-*属性は目的が違う

data要素とdata-*属性は名前が似ていますが、置く場所と役割が違います。

HTML5 Recommendationのdata-*属性に関する定義では、data-*属性はpageやapplicationに固有のdataを保存し、より適切な属性や要素がない場合に使うものとされています。siteから独立したsoftwareが使う公開metadataの仕組みではありません。

画面に見える名称と値を一組にしたいならdata要素です。既存の要素へscript専用の状態や識別子を持たせたいならdata-*属性が候補です。class名は見た目や選択に使われることがあるため、商品codeの保存場所として流用しません。

表示名と識別子を同じdataから出力する

CMSで商品名と商品codeを別々に手入力すると、一方だけを更新して対応が崩れます。名称と正式な識別子を管理dataへ保存し、templateでdata要素の内容とvalue属性を同時に出力してください。

制作を委託する場合、HTMLの形だけでなく、次の内容を納品対象にします。

1. value属性へ使うfield
2. fieldの値を決める担当者
3. codeを変更できる条件
4. 名称を変更したときの確認方法

markupを作る作業は委託できますが、どのcodeを正式な識別子とするかはサイト運営者が所有します。制作会社が仮の連番を付け、そのまま受注や在庫の仕組みへ接続すると、引継ぎ後に対応関係を直す費用が発生します。

data要素だけで外部利用を保証しない

data要素へ値を書いただけでは、検索engine、在庫system、表計算softwareが自動で意味を理解するとは限りません。値の形式と、それを読むscriptやmetadataの仕様は別に必要です。

必要な処理があるなら、どのsoftwareが、どの値を、何のために読むかを先に決めます。読み手がない値を大量に埋めても、運用作業が増えるだけです。

最初の一手は、画面では名称を見せ、処理では別の値を使っている項目を一件選ぶことです。その値が日時ならtime要素、page内のscriptだけが使うならdata-*属性、それ以外で表示文と値を対応させるならdata要素を検討してください。