web-dev-qa-db-ja.com

HTMLタグの非標準属性。良いこと？悪いこと？あなたの考え？

タグの非標準属性に関しては、HTML（またはおそらくXHTMLのみ？）は比較的厳密です。それらが仕様の一部でない場合、コードは非準拠と見なされます。

非標準の属性は、メタデータをJavaScriptに渡すのにかなり役立ちます。たとえば、リンクがポップアップを表示すると想定されている場合は、属性にポップアップの名前を設定できます。

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

または、ポップアップのタイトルをスパンなどの非表示要素に保存することもできます。

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

しかし、どちらが好ましい方法であるかについて私は引き裂かれました。最初の方法はより簡潔であり、検索エンジンやスクリーンリーダーをそれほど必要としないと思います。逆に、2番目のオプションを使用すると、大量のデータを簡単に保存できるため、用途が広がります。また、標準に準拠しています。

私はこのコミュニティの考えが何であるかに興味があります。このような状況にどのように対処しますか？最初の方法の単純さは、潜在的な欠点（ある場合）を上回りますか？

javascripthtmlstandards
92
dave mankoff

私は提案されたHTML 5ソリューション（data-接頭辞付き属性）。編集：カスタム属性の使用にはおそらくもっと良い例があると付け加えておきます。たとえば、カスタムアプリケーションが使用するデータで、標準属性に類似点がないもの（たとえば、classNameまたはidで必ずしも表現できないものに基づくイベントハンドラーのカスタマイズ）。

50
eyelidlessness

カスタム属性は、追加のデータをクライアント側に運ぶ便利な方法を提供します。 Dojo Toolkitはこれを定期的に行っており、（ Dojoking Dojo Toolkit Myths ）が指摘されています。

カスタム属性は常に有効なHTMLでしたが、DTDに対してテストした場合は検証されません。 [...] HTML仕様では、認識されない属性はユーザーエージェントのHTMLレンダリングエンジンによって無視されると規定されており、Dojoはオプションでこれを利用して開発を容易にします。

27
Maine

別のオプションは、JavaScriptで次のように定義することです。

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

次に、リンクがこのハッシュテーブルのIDに対応するIDを持っていると想定して、これをJavaScriptコードで後で使用できます。

他の2つの方法の欠点はありません。非標準の属性も、醜い隠されたスパンもありません。

不利な点は、例のように単純なことには少々やり過ぎかもしれません。ただし、渡すデータが多い、より複雑なシナリオでは、この方法が適しています。特に、データがJSONとして渡されることを考慮すると、複雑なオブジェクトを簡単に渡すことができます。

また、データをフォーマットとは別に保持するので、保守性が向上します。

次のようなものを作成することもできます（他のメソッドでは実際には実行できません）。

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

また、サーバー側のプログラミング言語を使用している可能性が高いため、このハッシュテーブルは動的に生成するのは簡単です（JSONにシリアル化して、ページのヘッダーセクションに吐き出すだけです）。

9
ibz

カスタムDTDでpopup_title属性を宣言しないのはなぜですか？これにより、検証の問題が解決されます。私はすべての非標準の要素、属性、値を使用してこれを行い、この検証に感謝します。コードの実際の問題のみを示しています。これにより、このようなHTMLではブラウザエラーも発生しにくくなります。

4
Marquee

この場合、最適なソリューションは

<a href="#" alt="" title="Title of My Pop-up">click</a>

タイトル属性を使用します。

本当に必要な場合は、仕様に違反することがあります。しかし、まれであり、正当な理由があるだけです。

編集：なぜ-1なのかはわかりませんが、仕様を破る必要があると思うときがあるのに、そうしないと私は指摘していました。

4
jskulski

非表示の入力要素をアンカー要素内にネストできます

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

その後、簡単にデータを引き出すことができます

$('#anchor_id .articleid').val()
2
Ioan Alexandru Cucu

最後の私の解決策は、何らかの区切り文字で区切られたidタグ内の追加データを非表示にすることでした（1つのアンダースコアはスペース、2つはその引数の終わりです）、2番目の引数にはidがあります：

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

醜い、そしてそれはあなたがまだ何か他のもののためにidタグを使っていないことを前提としていますが、それはすべてのブラウザに準拠しています。

0
Matt Parkins