95

タグの非標準属性に関しては、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 番目のオプションを使用すると、大量のデータを簡単に保存できるため、より用途が広くなります。また、規格に準拠しています。

このコミュニティの考えがどうなっているのか興味があります。このような状況をどのように処理しますか? 最初の方法の単純さは、潜在的な欠点 (存在する場合) を上回っていますか?

4

9 に答える 9

52

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

于 2008-10-16T17:00:38.653 に答える
28

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

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

于 2009-09-12T22:25:11.030 に答える
9

別のオプションは、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 にシリアル化して、ページのヘッダー セクションに出力するだけです)。

于 2009-05-19T07:01:21.393 に答える
4

この場合、最適解は

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

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

本当に必要な場合は、仕様を破ることがあります。しかし、めったに、そして正当な理由があるだけです。

編集: -1 の理由はわかりませんが、そうでない場合でも、仕様を破る必要があると思うことがあると指摘していました。

于 2009-05-19T07:13:09.797 に答える
4

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

于 2011-02-10T14:05:20.667 に答える
3

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

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

次に、次の方法で簡単にデータを引き出すことができます

$('#anchor_id .articleid').val()
于 2010-11-30T11:04:06.903 に答える
0

最終的に私の解決策は、ある種の区切り文字で区切られた id タグに追加のデータを非表示にすることでした (1 つのアンダースコアはスペース、2 つはその引数の末尾です)、2 番目の引数には id があります:

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

醜く、まだ id タグを他の目的で使用していないことを前提としていますが、すべてのブラウザーで準拠しています。

于 2012-10-11T14:23:48.343 に答える
-1

私もこれに頭を悩ませてきました。非標準属性の読みやすさは気に入っていますが、標準を破るのは好きではありません。隠しスパンの例は準拠していますが、あまり読みやすくありません。これはどうですか：

<a href="#" alt="" title="" rel="{popup_title:'Title of My Pop-up'}">click</a>

ここでは、JSONのキーと値のペアの表記により、コードは非常に読みやすくなっています。見ているだけでリンクに属するメタデータであることがわかります。「rel」属性のハイジャック以外に見られる唯一の欠陥は、これが複雑なオブジェクトでは厄介になることです。私は、上記の「data-」プレフィックス属性のアイデアが本当に好きです。現在のブラウザはこれをサポートしていますか？

ここで他に考えるべきことがあります。準拠コードはSEOにどの程度の影響を与えますか？

于 2009-08-13T18:03:39.163 に答える
-1

あなたの例での私の個人的な感覚は、XHTML 仕様の標準を満たしているため、span ルートの方が適切であるということです。ただし、カスタム属性の引数を確認できますが、不要なレベルの混乱を招くと思います。

于 2008-10-16T17:01:13.160 に答える