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

2009年12月1日

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よりもずっとアプリケーションフレンドリーなドキュメントとして作成可能になることは間違いないでしょう。

このエントリーをはてなブックマークに追加
follow us in feedly

タグ : HTML5 , Web標準



≫次の記事
日本でもエアコンを使わず外気で冷却するデータセンターの実験始まる
≪前の記事
HTML5のドラフト仕様書からMicrodataの抄訳

Loading...

Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。新しいオンラインメディアの可能性を追求しています。
詳しいプロフィール


Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed



Publickey 最新記事 10本

Publickey Topics 最新記事 10本


PR - Books


fig

fig

fig

fig



blog comments powered by Disqus