HTML5では、data-* の書式でカスタム属性 ( Custom Data Attribute )を定義できるらしい

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でググったら、日本語の有名どころによる紹介記事もあったのでメモ貼り。まじめに使うときには、あらためてちゃんと読む。