HTML5のCustom Data Attributeは、Microdataよりも気軽にデータを埋め込める

3.2.3.8 Embedding custom non-visible data -- HTML5

HTML5にはMicrodataというメタデータを埋め込むための仕様がある、ということを、「HTML5のMicrodataとは何か？ 」「HHTML5のドラフト仕様書からMicrodataの抄訳 」という2つの記事で紹介しました。

そのMicrodataよりもずっと手軽にHTMLに独自データを埋め込む方法が、HTML5では提供されています。それが「Custom Data Attribute」です。

すでに使われている独自属性

あるタグに独自の属性を付加したいという要求は、まれに生じます。

追記12/2：rel属性はHTMLの正式な仕様でした。そのため、以下の例は独自属性の例としては正しくないので省略させていただきます。すいません）

例えば、グーグルなどの検索エンジンは、スパム対策としてaタグに独自の属性とその値「rel="nofollow"」を2005年に定義しました。

<a href="http://www.publickey.jp/" rel="nofollow">

上記のように記述しておくと、このリンクは検索エンジンにはインデックスされない、ということにしたのです。しかしrel属性というのはHTML仕様にはありません。後付けの、完全な検索エンジンのための独自仕様です。

別の例として、NTTドコモはiモードの一部の機種を対象として、INPUTタグとTEXTAREAタグに独自の属性「iprof="マイプロフィール項目"」を定義しています。次のように記述するようです。

<input type="text" name="test1" iprof="tel1" />

JavaScriptでHTMLを操作するためにちょっとした属性を付加したい、ということもあるでしょう。Ajaxライブラリとしてよく知られたDojo ToolkitではdojoTypeという属性を定義しています。以下は、あるJSONファイルの読み込みのための設定です。

<div dojoType="dojo.data.ItemFileReadStore" 
  jsId="jsonStore" 
  url="cities.json"> 
</div>

このように、なにかの処理のための独自の属性を加えたい、という要求があり、実際に付加されたHTMLも存在します。こうした独自属性がHTMLに含まれていても、WebブラウザはHTMLの仕様にない独自属性は無視するので、Webページの表示にとって問題になることは通常はありません。

しかし独自属性がどんどんと使われるようになるとどうでしょう？ HTMLが今後進化していく中で、名前が衝突するかもしれません。もし将来、ref属性が別の意味として標準化されたら？ iprof属性が別の意味で標準化されたら？ あるいは標準化しようとした属性名がすでに独自属性として使われており、望ましい名前が標準化で採用できないとしたら？

できれば将来にわたって衝突しないことが保証されている独自属性の名前づけルールがあると望ましいでしょう。

Custom Data Attributeは独自属性のため

こうした独自属性のためにHTML5で用意されたのがCustom Data Attributeです。それはシンプルに、独自属性には先頭に必ず「data-」を付加せよ、というもの。

次の例では、Custom Data Attributeを用いて楽曲の長さの情報をリストに付加しています。この独自属性の情報を使えば、JavaScriptで楽曲の長さ順にソートする、といったことも可能になります。

<ol>
  <li data-length="2m11s">Beyond the Sea</li>
  <li data-length="3m20s">It's rainy</li>
  <li data-length="3m05s">Take that moon</li>
</ol>

Custom Data Attributeでは、「data-」の後ろに1文字以上のアルファベットを用いて属性名を付けることになっています。そして、HTMLの要素ならどれでも、この独自属性を付加することが可能です。

この属性の値はDOMからも取得できると、仕様には記述されています。

MicrodataとCustom Data Attributeはどう使い分ける？

MicrodataとCustom Data Attributeはどう使い分ければいいでしょう？

Custom Data Attributeは、オリジナルデータに対して追加の情報を与える、あるいはオリジナルデータを加工するための付加データのために使うとよさそうです。

一方でMicrodataは、やはりセマンティックを意識して、オリジナルデータに意味を与える、といった用途に適しているように思います。

MicrodataとCustom Data Attributeという2つの仕様がHTML5に含まれることで、HTML5はこれまでのHTMLよりもずっとアプリケーションフレンドリーなドキュメントとして作成可能になることは間違いないでしょう。