HTMLのタグの属性に、普通使わないものを使うことはできますか?

質問

HTMLのタグの属性に、普通使わないものを使うことはできますか?

HTMLにはあるタグでは使う属性も他のタグでは使わないタグがたくさんあります
例えば、fontタグでは属性としてcolorなどを使えますが、divに使っても何もおきません
これを利用してHTMLファイルをjavascriptでパースする時の条件判別に利用しようと考えたのですが、こういった使い方はしてもよいものなのでしょうか?

質問が分かりにくいかもしれませんが、分かる方よろしくおねがいします。

回答No.5

fujillin · ベストアンサー

No4です。
なんだか、意味が通じていないようで、気持ちが悪いので…

＞今回私が知りたいと思ったのが、まさにそのルールを
＞定めるための方法のことです
ルールは「やりたいこと」を知っている質問者様にしか作れません。
No4で書いたのは、ルールに応じた構造でマークアップしておけば、おのずとそのルールによって要素を判別できるのではないかという意味です。

ごく簡単な例で言えば、画像とキャプションの対がたくさんあるとして、レイアウト上から画像のところに文字をいれたくないし、キャプションのところに画像を入れたくないということが発生したとします。
ランダムにある（何を入れてもいい）ボックスに、識別子をつけてどちらかにわけて欲しいという要求はまずないでしょう。それなら、判別なんてする必要もなくどちらを入れてもかまわないのですから…

仮に(↑)の例で
<div></div>　（画像用）
<div></div>　（テキスト用）
のように見分けのつきにくいマークアップがしてあったとしても、識別子などは不要で、奇数番目と偶数番目ということで識別が可能だと思われます。
なぜかといえば、「対になっている」という目的からのルールを応用しているからで、HTML上の属性や目印（idやclass）がルールになっているわけではないからです。

また、これに表示の指定するために、<div class="image"><img ～></div><div class="text">text</div>などとすることを考え始めるのであれば、
<div>
<img ～>
<span>text</span>
</div>
とでも想定しておいた方がよほどましでしょう。
（<div>～</div>は<li>～</li>なのかも知れない）

中身より先にマークアップが存在するなんてことはあり得ないので、記述する内容があって初めてそれに対応するマークアップや構造が決まってくるはずです。（実際には、複雑なので構造だけで全てを識別するわけにはいかないでしょうけれど…）

というわけで、ルールを定めることができるのは、目的（内容）を知っている質問者様だけということです。

お礼

回答ありがとうございます

すみません、私の勘違いの部分も多かったです・・・
今までの考え方を少し変えると私の仕様を実現できそうです

マークアップ言語に触れて日が浅いので、どうしても力づくでやろうとしてしまうこともあり、よく仕組みを理解しないままに進めていた結果がこうなってしまったのだと思います
大変勉強になりました

回答No.8

神崎 渉瑠（@taloo）

後出しになってしまいましたが、、、というか思い出したので。
No.6、7の補足として、、、

HTMLの文法違反は絶対禁止という意見も少なからずあります。

また、JavaScriptでdocument.write('<div color="">')としたり、
document.getElementsByTagName('div')[0].setAttribute('color', '')なら
HTMLの文法チェッカー（スクリプトの中身までは見ないので）をパスするから大丈夫、という意見もあります。

Googleなどは独自仕様としてrel属性にNOFOLLOWなどを規定していますし、
（HTML4/5/XHTMLの文法上は、relに使用できる言葉はINDEXやBOOKMARKなど、指定されたものだけです。）
このような独自仕様はmicroformatsと呼ばれています。
http://microformats.org/wiki/Main_Page-ja
（microformatsは私には複雑すぎてよくわかりません。。。）

私自身の意見としては、作法としてはあまり好ましくはないと思います。
そのため、タグ属性を追加するのではなく、クロージャ、またはclass属性やrelの内容など、規定された属性で判断しています。

独自仕様を作るなら、他の方が公表している内容と違う内容にして置いた方が良いと思います。
（自分用のプレフィクスを付けて、<div taloo-color="">などとしたり。
HTML5にdata-というプレフィクスが定義されています。）
そうしないと、いきなりmicroformatsが実装されて、思ってた動作と違う動作になってしまう、と言うことも考えられますから。
（現在では、microformatsの動作はプラグインやアドオンによる物が多いと思います。）

ご参考まで。

お礼

回答ありがとうございます

microformats・・・wikiを見たのですが私には難しそうですね・・・
こういったものもあるのだと参考になりました

回答No.7

神崎 渉瑠（@taloo）

HTMLの拡張については、Spryフレームワークが参考になると思います。
http://labs.adobe.com/technologies/spry/home.html

<div spry:detailregion="">
などというspryネームスペースを使用して、データの表示やHTMLの再構築を行います。

本来はDOCTYPEを拡張しなければならないのですが、
ブラウザがDOCTYPEの拡張文法に対応していないため、DOCTYPEを拡張すると > という記号が表示されてしまいますので、
DOCTYPEを拡張せずに、文法違反のままspryネームスペースを使用するように、adobe社が指示しています。

お礼

回答ありがとうございます

Spryフレームワークは面白そうですね
機会があれば使ってみたいと思います

回答No.6

神崎 渉瑠（@taloo）

> これを利用してHTMLファイルをjavascriptでパースする時の条件判別に利用しようと考えたのですが、こういった使い方はしてもよいものなのでしょうか?

文法違反に対する動作はブラウザ依存です。

ブラウザの種類やバージョンによっては使えるかもしれませんし、使えないかもしれません。
<div color="blue">が、今までは何の変化もなかったのに、突然青文字で表示されるようになるかもしれません。
今までJavaScriptで取得できていた物が、ブラウザのバージョンアップで突然取得できなくなるかもしれませんし、できるようになるかもしれません。

HTML4/HTML5/XHTML、DOM、HTML-DOM、JavaScript、ECMAScript、JScript、E4X等々、
さまざまな仕様が交錯していますから、
たとえばHTML4では「無視せよ」という仕様であっても、HTML-DOMで「有効にせよ」という仕様であれば、
ブラウザがどちらの仕様を優先するかでも違ってきます。
（たとえばelement.getAttribute('color')、element.colorでも違いが生じます）

それを踏まえた上で、
ブラウザ依存を吸収できるなら（または訪問者に使用するブラウザやバージョンを限定させるなら）かまわないと思います。

お礼

回答ありがとうございます

確かにwebブラウザのプログラミングだと、ブラウザの仕様がかなり効いてきますね
私もこれまでに何回か痛い目にあってきました・・・

ブラウザの仕様の違いだけでなく、そのバージョンアップにも気を配らないといけないのは大変だと思いました

回答No.4

fujillin

実際のものが、どのようなものを想定しているのかわかりませんが…

HTMLの構造をうまく作ることで、なんら目印（idなど）がなくても要素を役割別に特定することは不可能ではないでしょう。
あるいは、他の方もおっしゃっていますが、同じ役割のものは表示方法が同じ場合が多いので、classをその手がかりとすることも十分に考えられます。よしんば、そうはうまくいかなくても、クラスは一意ではなく個々の要素が複数のクラスを持つことができるので、実質的にはこれで十分識別が可能だと思われます。（本来の用途からははずれるかも知れませんが）

あるいは、別の属性を使うにしても、すでに世の中で考えられている概念を利用しておくのも一法かと。
　http://standards.mitsue.co.jp/resources/w3c/TR/2008/WD-xhtml-role-20080407/#s_role_module_attributes
　http://msdn.microsoft.com/ja-jp/library/cc304102%28en-us,VS.85%29.aspx

＞ボックスごとに文字が埋め込めるか画像が埋め込めるかの
＞判別のために使えないか、と考えました
ボックスによって、入れられるものがなんらかの方法で決まっているのなら、そのルールで判別すればよいのではないでしょうか？　多分、文法的には画像もテキストも入れられるはずですから、そのルールというのは質問者様がなんらかの恣意によって作成なさったルールのはずで、気まぐれに決まっているものでもないでしょう。
まぁ、そんな面倒なことを言わなくても、例えば、画像用はdiv、テキスト用はspanなどとしておくだけでも簡単に判別可能にはなりますが…（表示方法はCSSで）

お礼

回答ありがとうございます

確かに、複数のクラスを持たせれば私の仕様を満たすことはできそうです
その分ソースが長くなってしまいそうですが、十分無視できるものだと思います

role属性というものがあるのは知りませんでした・・・
これはうまく扱えると便利そうですね

＞ボックスによって、入れられるものがなんらかの方法で決まっているのなら、そのルールで判別すればよいのではないでしょうか？
すいません、私の書き方が悪かったです・・・
今回私が知りたいと思ったのが、まさにそのルールを定めるための方法のことです
どうにかして定めることができれば、判別できるだろう、と考えていました

＞まぁ、そんな面倒なことを言わなくても、例えば、画像用はdiv、テキスト用はspanなどとしておくだけでも簡単に判別可能にはなりますが…（表示方法はCSSで）
最終的には、動画やフラッシュも埋め込めるようにできればと考えていたので、汎用的に使えるものを探していました
とは言え、色々とやり方はあるようですね

回答No.3

Tacosan

「ふつう使わない」としても「使っていい」となっているものなら使っていいし, 「使っていい」となっていなければ使ってはいけない. HTML はかなりでたらめに書かれていたのでユーザエージェントもその「でたらめ」をそれなりに処理してくれることが多いんだけど, どのような処理を期待してはダメ.

お礼

回答ありがとうございます

うーん・・・やはりあまり良い方法ではないみたいですね・・・
他の方法で何かないか調べてみることにします

回答No.2

yyr446

目的がよくわかりませんが、役にたたないか、とんでもなく複雑な
ものになるでしょう．．．．

　そもそも、何が正しいHTMLマークアップかというと、HTMLとか、XHTMLの
バージョンによっても異なります。

　さらに、みんな、きちんとDOC宣言して、その仕様どおりに、
正しくHTMLマークアップしているとは限りません。

例えばHTML4.01 Strict で、各タグ（要素）で使える属性は、↓
http://www.w3.org/TR/1999/REC-html401-19991224/
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-1176245063
で調べなきゃなんないし、それだけでもたいへんです。

お礼

回答ありがとうございます

目的としては、cssで作ったボックスの中に後からjavascriptのinnerHTMLで文字や画像を埋め込むプログラムを作成していました
その時に、ボックスごとに文字が埋め込めるか画像が埋め込めるかの判別のために使えないか、と考えました

見直してみると、結構DOC宣言を忘れているプログラムがありました・・・
貼っていただいたリンクの方も参考にさせていただきます

回答No.1

noname#140045

もしかしたら違うことを言っているのかも知れませんが、classやidではダメなのでしょうか。

たぶん、こんな質問するのは個人用途だと思いますので、本人さえ良ければたぶんいいのだと思いますが、とても綺麗な方法とは言えないでしょう。

お礼

回答ありがとうございます

classやidはすでに別の用途で使っているので、他の要素で使えるものは・・・と探したのがきっかけでした
確かに私が個人的にうれしいのであって、あまり綺麗な方法とは言えないですね・・・