Nicht standardmäßige Attribute für HTML-Tags. Gute Sache? Schlechte Sache? Ihre Gedanken?

HTML (oder vielleicht nur XHTML?) Ist relativ streng, wenn es um nicht standardmäßige Attribute für Tags geht. Wenn sie nicht Teil der Spezifikation sind, wird Ihr Code als nicht konform angesehen.

Nicht standardmäßige Attribute können jedoch sehr nützlich sein, um Metadaten an Javascript weiterzugeben. Wenn ein Link beispielsweise ein Popup anzeigen soll, können Sie den Namen des Popups in einem Attribut festlegen:

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

Alternativ können Sie den Titel für das Popup in einem versteckten Element wie einer Spanne speichern:

<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>

Ich bin jedoch hin und her gerissen, welche Methode bevorzugt werden sollte. Die erste Methode ist prägnanter und schraubt vermutlich nicht so sehr mit Suchmaschinen und Bildschirmleseprogrammen. Umgekehrt erleichtert die zweite Option das Speichern großer Datenmengen und ist somit vielseitiger. Es ist auch standardkonform.

Ich bin gespannt, was diese Community denkt. Wie gehen Sie mit einer solchen Situation um? Wiegt die Einfachheit der ersten Methode die möglichen Nachteile auf (falls vorhanden)?

Ich bin ein großer Fan der vorgeschlagenen HTML 5-Lösung ( data-vorangestellte Attribute). Bearbeiten: Ich möchte hinzufügen, dass es wahrscheinlich bessere Beispiele für die Verwendung von benutzerdefinierten Attributen gibt. Zum Beispiel Daten, die von einer benutzerdefinierten Anwendung verwendet werden und deren Standardattribute nicht analog sind (z. B. Anpassung für Ereignishandler basierend auf etwas, das nicht unbedingt in einem Klassennamen oder einer ID ausgedrückt werden kann).

Benutzerdefinierte Attribute bieten eine bequeme Möglichkeit, zusätzliche Daten auf die Clientseite zu übertragen. Dojo Toolkit macht dies regelmäßig und es wurde darauf hingewiesen ( Debunking Dojo Toolkit Myths ), dass:

Benutzerdefinierte Attribute waren immer gültiges HTML. Sie werden nur nicht getestet, wenn sie mit einer DTD getestet werden. [...] Die HTML-Spezifikation besagt, dass jedes nicht erkannte Attribut von der HTML-Rendering-Engine in Benutzeragenten ignoriert werden soll, und Dojo nutzt dies optional, um die Entwicklung zu vereinfachen.

Eine andere Möglichkeit wäre, so etwas in Javascript zu definieren:

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

Dann können Sie dies später in Ihrem Javascript-Code verwenden, vorausgesetzt, Ihr Link hat eine ID, die der ID in dieser Hashtabelle entspricht.

Es hat nicht die Nachteile der beiden anderen Methoden: keine nicht standardmäßigen Attribute oder die hässliche versteckte Spanne.

Der Nachteil ist, dass es für so einfache Dinge wie Ihr Beispiel ein bisschen übertrieben sein kann. Für komplexere Szenarien, in denen Sie mehr Daten übergeben müssen, ist dies eine gute Wahl. Insbesondere wenn man bedenkt, dass die Daten als JSON übergeben werden, können Sie komplexe Objekte problemlos übergeben.

Außerdem halten Sie Daten von der Formatierung getrennt, was für die Wartbarkeit von Vorteil ist.

Sie können sogar so etwas haben (was Sie mit den anderen Methoden nicht wirklich tun können):

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>

Und da Sie höchstwahrscheinlich eine serverseitige Programmiersprache verwenden, sollte diese Hash-Tabelle trivial sein, um dynamisch generiert zu werden (serialisieren Sie sie einfach in JSON und spucken Sie sie in den Header-Bereich der Seite).

In diesem Fall ist die optimale Lösung

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

und mit title-Attribut.

Manchmal breche ich die Spezifikation, wenn ich sie wirklich brauche. Aber selten und nur aus gutem Grund.

EDIT: Ich bin mir nicht sicher, warum die -1, aber ich habe darauf hingewiesen, dass Sie manchmal denken, Sie müssen die Spezifikation brechen, wenn Sie dies nicht tun.

Warum nicht das Attribut popup_title in einer benutzerdefinierten DTD deklarieren? Dies löst das Problem mit der Validierung. Ich mache dies mit allen nicht standardmäßigen Elementen, Attributen und Werten und dank dieser Validierung zeige ich nur echte Probleme mit meinem Code. Dies macht auch Browserfehler mit solchem ​​HTML weniger möglich.

Sie können versteckte Eingabeelemente IN das Ankerelement verschachteln

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

Dann können Sie die Daten einfach durch herausziehen

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

Meine Lösung am Ende bestand darin, zusätzliche Daten im ID-Tag zu verbergen, die durch eine Art Trennzeichen getrennt sind (ein Unterstrich ist ein Leerzeichen, zwei ist das Ende dieses Arguments), das zweite Argument gibt es eine ID:

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

Hässlich, und es wird davon ausgegangen, dass Sie das ID-Tag nicht bereits für etwas anderes verwenden, aber es ist für jeden Browser kompatibel.

Mein persönliches Gefühl in Ihrem Beispiel ist, dass die Spannenroute angemessener ist, da sie den Standards der XHTML-Spezifikation entspricht. Ich kann jedoch ein Argument für benutzerdefinierte Attribute sehen, aber ich denke, dass sie ein Maß an Verwirrung hinzufügen, das nicht benötigt wird.

Ich habe mir auch darüber den Kopf zerbrochen. Ich mag die Lesbarkeit von nicht standardmäßigen Attributen, aber ich mag es nicht, dass sie den Standard brechen. Das Beispiel für versteckte Bereiche ist kompatibel, aber nicht sehr gut lesbar. Was ist damit:

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

Hier ist der Code aufgrund der Schlüssel / Wert-Paar-Notation von JSON sehr gut lesbar. Sie können erkennen, dass es sich um Metadaten handelt, die zum Link gehören, indem Sie sie sich ansehen. Der einzige Fehler, den ich neben der Entführung des Attributs "rel" sehen kann, ist, dass dies für komplexe Objekte chaotisch werden würde. Ich mag die oben erwähnte Idee von "Daten" -Präfixattributen sehr. Unterstützen aktuelle Browser dies?

Hier ist noch etwas zu überlegen. Wie viel Einfluss hat nicht konformer Code auf die Suchmaschinenoptimierung?