Ist es eine schlechte Praxis, um zusätzliche Attribute in HTML-Elementen?

Manchmal habe ich ein Attribut hinzuzufügen, um einige meiner Kontrollen. Wie:

<a href id="myLlink" isClimber="True">Chris Sharma</a>

Ich weiß, es ist kein Gültiger html-Code. Aber es hilft mir in einigen Fällen.

Ist dies als eine schlechte Praxis? Ein Freund von mir sagt, dass es ok ist für Intranet-Umgebung, aber im internet könnte es nicht finden, freundlich von Suchmaschinen.

Wenn es ist nicht eine gute Praxis, was sind die besten practicess?

Dank

InformationsquelleAutor pencilCake | 2010-04-30
  1. 9

    Ja. Es gilt als schlechte Praxis. Ihr HTML-Code (wenn es 4.0) nicht Valide ist erfolgreich. Stattdessen fügen Sie eine Klasse, zum Beispiel so:

    <a href id="myLlink" class="climber" >...</a>

    Denken Sie daran, dass Sie können mehrere Klassen:

    <a href id="myLlink" class="climber girl pretty" >...</a>

    Und kann mit Hilfe von CSS oder JQuery zu wählen Sie aus Zeug basierend auf diesen Klassen und selektiv überschreiben Stil, basierend auf den Kombinationen:

    a.climber             { color: brown; }
a.climber.girl        { color: red; }
a.climber.girl.pretty { color: pink; }
    • Hat die HTML-validiert erfolgreich, wenn ich beziehen sich auf eine Klasse, die gar nicht existiert?
    • Ja, das ist das schöne daran. Die Klassen müssen nicht vorhanden in der CSS, damit der HTML-Code gültig. So ist die Coole Sache ist das... können Sie die tag-Elemente mit Klassen, so dass Sie tun können Funktionen auf die Elemente mit JQuery. Visual Studio kann Ihnen die "roten kringel" unter Ihrem Klassennamen als Sie geben, aber es ist ein "false positive" - es ist völlig koscher.
    • was ist, wenn die zusätzlichen attrs sind zahlen <div class="button" isClimber="True" rank="22">Chris Sharma</div>
    • In Fällen wie diesem, HTML definiert die Daten-XXX-Attribut -- Sie könnte verwenden <div class="button" data-isClimber="True" data-rank="22">, aber stattdessen würde ich empfehlen, mehrere Klassen und nur ein Daten-element, da es nicht ratsam, Stil, basierend auf Datenelementen (und es macht für einen längeren tag) : <div class="button climber" data-rank="22"> (dann wieder, wenn Sie wirklich wollen, eine Schaltfläche, warum nicht einfach tun <input type='button' class='climber' data-rank='22'>?
    • Danke @DaveMarkle und ja, der button war nur eine lahme Beispiel, um meinen Standpunkt zu vermitteln. Und danke für die data- Hinweis, dass das, was ich suchte.
    InformationsquelleAutor Dave Markle
  2. 22

    Wenn Sie mit HTML5-doctype, dann können Sie Daten attrbutes, die gültig sind.

    So etwas wie das folgende gilt

    <a href id="myLlink" data-isClimber="True">Chris Sharma</a>
    • Was ist, wenn der browser des Benutzers nicht verarbeiten HTLM 5 doctype ? Lässt es sich nicht aktivieren IE-quirk-Modus ?
    • Der HTML5-doctype funktioniert in älteren Browsern wie dem IE6, nur nicht die Elemente. Weitere Informationen über die Verwendung von HTML5 - "jetzt": "html5doctor.com/how-to-use-html5-in-your-client-work-right-now
    InformationsquelleAutor rahul
  3. 3

    Ist es nicht am besten noch eine gute Praxis.

    Ich denke, Sie müssen es für einige javascript-Behandlung. Ich in der Regel lösen das problem durch das hinzufügen von benutzerdefinierten Klasse "class" - Attribut, Präfix mit 'js'.

    Andere Lösung ist die Verwendung der Daten speichern/abrufen von Daten functionnality von JQuery, oder das äquivalent von jedem anderen framework, was bedeutet echo alle über Ihren generierten HTML-Code.

    • Ich mag die Ungarische notaion benennen Idee. Ich denke, es kann hilfreich sein, für die Css Jungs in der Mannschaft nicht verwechselt werden.
    • wunderbare Antwort + wunderbarer Kommentar. Ich persönlich glaube, eine Menge in Namenskonventionen und bietet diese Methode die Lesbarkeit + stressfrei mit jedem doctype oder browser
    InformationsquelleAutor Clement Herreman
  4. 2

    Ungültig XHTML-das ist eine schlechte Sache - vor allem, weil Sie nicht zeigen, mit gültigen Ist es eine schlechte Praxis, um zusätzliche Attribute in HTML-Elementen? 😉 Jeder mainstream-browser und Suchmaschinen ignorieren zusätzlicher Attribute, die glücklich wenn. Man könnte hinzufügen, eine zusätzliche namespace-aber, um Ihre XHTML-wieder gültig. 

    <html xmlns:my="http://example.com">
  <!-- SNIP -->
  <a href id="myLlink" my:isClimber="True">Chris Sharma</a>
  <!-- SNIP -->
</html>

    Vollkommen gültiges XHTML. Aber W3C-Validator immer noch weigern zu überprüfen (denke ich). Es ist ein Makel, der Ihre XML-parser. Für solche nicht-namespace-aware Parser, my:isClimber wird immer noch behandelt, als wäre isClimber. Aber jetzt können Sie sich bequem zurücklehnen, da Sie wissen, dass es gültig ist XML und schließlich das ist, was zählt, nicht wahr 😉

    InformationsquelleAutor sfussenegger
  5. 0

    Verwendung von jquery,

    speichern: $('#element_id').data('extra_tag', 'extra_info');

    abrufen: $('#element_id').data('extra_tag');

    War dies auch gepostet @ [http://stackoverflow.com/a/16985773/2458978][1]

    [1]: Wie speichern Sie beliebige Daten für einige HTML-tags

    InformationsquelleAutor user2458978
  6. -2

    Ich glaube nicht, dass es schlecht ist, die Praxis als solche, es ist sicherlich sehr bequem und ist genau das, was Sie tun würden, in einer xml-Umgebung. Wichtiger ist die Art der Informationen, die Sie halten, in denen benutzerdefinierte Attribute sind und wie Sie verwendet werden, innerhalb des Codes.

    Schönere alternative wäre, die Daten in unterschiedlicher Art und Weise zum Beispiel die data () - Funktionen von jQuery.

    • Geez, danspants Sie Lesen meine Gedanken !
    • Aber dann, wenn das jemand liest, der markup der Seite, wird er nicht, keine Ahnung, in Bezug auf solche Daten, bis er überprüft die javascript-code. 🙁
    • ozdogan - aber das ist, wo die richtige Dokumentation kommt 🙂
    • Es ist eine schlechte Praxis, da es nicht zukunftssicher ist. Wenn Sie ein Attribut "foo", um Ihre element-und der HTML-Spezifikation definiert ein neues Attribut "foo", die beabsichtigt war, um verwendet werden, völlig anders als Ihre Umsetzung dann Probleme wahrscheinlich auftreten. Die neuen HTML5 data -* - Attribute existieren, um dieses Problem zu beheben, wie Sie vom browser ignoriert/Maschinen.
    InformationsquelleAutor danspants
Schreibe einen Kommentar