HTMLタグに独自属性を追加？

質問

Webアプリに関する質問ですが、HTML規約に関係ありそうなことなので、こちらで質問させていただきます。

サーバサイドスクリプトを使ってHTMLに値を埋め込み、その値をJavascriptで使用する場合、<input type="hidden">なタグを使うのはよくある話ですが、最近、HTML生成量を減らすためかどうかはわからないのですが、タグに独自属性を追加しているケースが見られます。

<ul class="movie-incoming">
<li data-id="201254" data-status="ordered">プロメテウス</li>
<li data-id="201255" data-status="unordered">ロック・オブ・エイジズ</li>
<li data-id="201258" data-status="unordered">漆黒の闇で、パリに踊れ</li>
</ul>

コード量は小さいし、jQueryでli要素の中にクリックイベントを仕込み、イベントハンドラで、$(this).attr("data-id")などとやれば簡単に設定値を得ることができるので、非常に賢いやり方だと思っています。

問題は、このような記述方法がHTML的に正しいのか、という点と、すべてのブラウザで対応できるのか、ということです。
モバイル用のjQueryMobileなどでもさかんに使われているようですが、どうなんでしょうか？

回答No.2

Yune-Kichi · ベストアンサー

HTML5の独自データ属性ですね。

HTML 4.0/4.01, ISO HTML, XHTML 1.0, XHTML 1.1では不正ですが，
HTML5であれば正しい，ということになります。
http://www.html5.jp/tag/attributes/data.html

お礼

参考リンクを開いて納得しました。HTML5で正式に定められた規格だったのですね
こういう点に疎いもので、安心しました。
今回はありがとうございました。

回答No.3

b0a0a

Element["data-id"]はまずいですが
Element.getAttribute("data-id")は大丈夫です
jQueryはおそらく後者なので大丈夫です
あと属性名はx-で始めたほうがいいです

お礼

ありがとうございます。ご意見参考にさせていただきます。

回答No.1

notnot

HTML文法的には正しくないです。

ブラウザは互換性のため、自分の知らないタグや属性を無視しますので、使っても大丈夫です。

お礼

ありがとうございます。ご意見参考にさせていただきます。