HTML5では、data-* の書式でカスタム属性 ( Custom Data Attribute )を定義できるらしい
Posted: Updated:
Tweetボタンのdata-urlとかdata-text属性はアリなのか？
結論は、本エントリーのタイトルの通りHTML5の仕様の中では定義済みということでアリでした。エントリーの下の方で情報の出所を紹介してます。以下は、後半まで逐次的な調べ物メモです。
以前、公式Tweet Buttonを早速試した！で、Tweetボタンを紹介しましたが、そのときから気になっていた素朴なギモン。
HTMLの属性って、勝手に拡張していいの？
Tweetボタンの場合、data-url, data-via, data-text, data-related, data-count のようにHTMLでは未定義（と言っていいのか分かりませんが）の、属性をベタベタ貼って動作させています。
確かに、こうやってJS等で利用する情報を好きに定義して良いなら、かなりラクチンな訳ですが、これはHTML的にはやっても良いの？？という疑問を調べてみました。
W3C原理主義に基づいてバリデート
してみました。
[Invalid] Markup Validation of http://havelog.ayumusato.com/archives/experiment/html4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>HTML4.01</title>
</head>
<body>
<h1><a href="http://example.com" data-url="http://data.example.com">テスト</a></h1>
</body>
</html>
まずはHTML4.01 Transitionalでトライ。やっぱり怒られた。
[Invalid] Markup Validation of http://havelog.ayumusato.com/archives/experiment/xhtml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>XHTML 1.0</title>
</head>
<body>
<h1><a href="http://example.com" data-url="http://data.example.com">テスト</a></h1>
</body>
</html>
次に、XHTML 1.0 Transitionalをトライ。ばっちり怒られた。
[Valid] Markup Validation of http://havelog.ayumusato.com/archives/experiment/html5.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5</title>
</head>
<body>
<h1><a href="http://example.com" data-url="http://data.example.com">テスト</a></h1>
</body>
</html>
最後に、HTML5でトライ。怒られなかった！
HTML5ならいいらしい
HTML5でValidということは、どういう形式で認められているかはわかりませんが、HTML5の仕様書の中ではきっとOKなんでしょう。ただ、属性名の拡張が好き勝手に認められているかは別問題です。
疑わしきは、data-fooという属性名。jQuery Mobile のサンプルを覗いた際にも、同様にdata-barのような属性で、HTMLドリブンな挙動を制御している様子だったので、このdata-という書式が、仕様書の中で認められているんじゃないか疑惑。
※本当にそうだとしたら、data-urlとかあるあるな命名は、衝突とか恐ろしい気もするんですけど....。-moz-とか-webkit-的なノリで、プレフィックスいらんの？
HTML5の草稿仕様の中に、それらしい記述を発見
3.2.3.8 Embedding custom non-visible data with the data-* attributes
いわくHTML5では、data-fooの書式に従う限り、好きなカスタムデータを属性として埋め込んでよろしい、らしいです。これは便利だナー。
現状だと、classを振ったら機能するよ的なスクリプトを書こうと思うと、HTMLの側でかなり無茶を強いられることがたまにあります。でも、この書式が認められるならHTMLで無理しなくてもスクリプトと調和できて良いですね。
element . dataset
Returns a DOMStringMap object for the element's data-* attributes.
Hyphenated names become camel-cased. For example, data-foo-bar="" becomes element.dataset.fooBar.
ブラウザ側に求められる仕様としては、DOMでちゃんとアクセスできて、そのとき data-foo-barは、dataset.fooBarのようなラクダ記法として変換されるらしい。data-foo-bar がアリなら、data-ahomu-foo みたいなプレフィックス的な何かもつけれるので安心。（詳しい仕様は原文を優先して参照してください）
最近ちらほらと見るようになっていて、気になっていた記法だったので裏付けが取れて満足。スマートフォン向け等の、クライアント環境を限定できる案件では、積極的に利用してみてもいいかも。
参考URL
Custom Data Attributeでググったら、日本語の有名どころによる紹介記事もあったのでメモ貼り。まじめに使うときには、あらためてちゃんと読む。
- HTML5のCustom Data Attributeは、Microdataよりも気軽にデータを埋め込める － Publickey
- HTML5 Custom Data Attributes (data-*) | HTML5 Doctor
