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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$('#anchor_id .articleid').val()

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

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

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

あなたの例での私の個人的な感想は、XHTML仕様の標準を満たすため、スパンルートがより適切であるということです。ただし、カスタム属性の引数は表示されますが、不要なレベルの混乱が加わると思います。

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

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

ここでは、JSONのキーと値のペア表記のため、コードは非常に読みやすくなっています。これを見るだけで、リンクに属するメタデータであることがわかります。「rel」属性のハイジャックの横に見られる唯一の欠点は、これが複雑なオブジェクトに対して厄介になることです。上記の「data-」という接頭辞付きの属性の考え方は本当に気に入っています。現在のブラウザはこれをサポートしていますか？

ここで他に考えるべきことがある。準拠コードがSEOに与える影響はどのくらいですか？