Was sind gültige Werte für das Attribut id in HTML?

Question

Bei der Erstellung des id Attribute für HTML-Elemente, welche Regeln gibt es für den Wert?

Answer 1

Für HTML 4 lautet die Antwort technisch:

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-"), Unterstrichen ("_"), Doppelpunkten (":") und Punkten (".") gefolgt werden.

HTML 5 ist noch freizügiger und besagt nur, dass eine id mindestens ein Zeichen und keine Leerzeichen enthalten darf.

Das Attribut id unterscheidet Groß- und Kleinschreibung in XHTML .

Aus rein praktischen Gründen sollten Sie bestimmte Zeichen vermeiden. Punkte, Doppelpunkte und '#' haben in CSS-Selektoren eine besondere Bedeutung, daher müssen Sie diese Zeichen mit einem Backslash in CSS oder ein doppelter Backslash in einer Selektor-String, der an jQuery übergeben wird . Überlegen Sie sich, wie oft Sie in Ihren Stylesheets oder Ihrem Code ein Zeichen auslassen müssen, bevor Sie sich mit Punkten und Doppelpunkten in IDs verrückt machen.

Zum Beispiel die HTML-Deklaration <div id="first.name"></div> gültig ist. Sie können dieses Element in CSS auswählen als #first\.name und in jQuery wie folgt: $('#first\\.name'). Aber wenn Sie den Backslash vergessen, $('#first.name') haben Sie einen absolut gültigen Selektor, der nach einem Element mit id first und auch mit Klasse name . Dies ist ein Fehler, der leicht zu übersehen ist. Langfristig sind Sie vielleicht glücklicher, wenn Sie die id first-name (ein Bindestrich anstelle eines Punktes), stattdessen.

Sie können Ihre Entwicklungsaufgaben vereinfachen, indem Sie sich strikt an eine Namenskonvention halten. Wenn Sie zum Beispiel nur Kleinbuchstaben verwenden und Wörter immer entweder mit Bindestrichen oder Unterstrichen trennen (aber nicht beides, wählen Sie eines und verwenden Sie nie das andere), dann haben Sie ein leicht zu merkendes Muster. Sie werden sich nie fragen "war es firstName o FirstName ?", denn Sie werden immer wissen, dass Sie Folgendes eingeben sollten first_name . Bevorzugen Sie Kamelkoffer? Dann beschränken Sie sich darauf, keine Bindestriche oder Unterstriche, und verwenden Sie für den ersten Buchstaben immer entweder Groß- oder Kleinschreibung, mischen Sie sie nicht.

---

Ein mittlerweile sehr obskures Problem war, dass mindestens ein Browser, Netscape 6, id-Attributwerte wurden fälschlicherweise unter Berücksichtigung der Groß- und Kleinschreibung behandelt . Das bedeutete, dass Sie bei der Eingabe von id="firstName" in Ihrem HTML (Kleinbuchstaben 'f') und #FirstName { color: red } in Ihrem CSS (Großbuchstabe "F"), hätte dieser fehlerhafte Browser die Farbe des Elements nicht auf Rot gesetzt. Zum Zeitpunkt dieser Bearbeitung, April 2015, hoffe ich, dass Sie nicht aufgefordert werden, Netscape 6 zu unterstützen. Betrachten Sie dies als eine historische Fußnote.

Answer 2

より HTML 4-Spezifikation :

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-"), Unterstrichen ("_"), Doppelpunkten (":") und Punkten (".") gefolgt werden.

Ein häufiger Fehler ist die Verwendung einer ID, die mit einer Ziffer beginnt.

Answer 3

Sie können technisch gesehen Doppelpunkte und Punkte in id/name-Attributen verwenden, aber ich würde dringend empfehlen, beides zu vermeiden.

In CSS (und einigen JavaScript-Bibliotheken wie jQuery) haben sowohl der Punkt als auch der Doppelpunkt eine besondere Bedeutung, und Sie werden Probleme bekommen, wenn Sie nicht vorsichtig sind. Punkte sind Klassenselektoren und Doppelpunkte sind Pseudoselektoren (z. B. ":hover" für ein Element, wenn sich die Maus darüber befindet).

Wenn Sie einem Element die ID "my.cool:thing" geben, sieht Ihr CSS-Selektor wie folgt aus:

#my.cool:thing { ... /* some rules */ ... }

Das heißt in der CSS-Sprache: "das Element mit der ID 'my', der Klasse 'cool' und dem Pseudoselektor 'thing'".

Bleiben Sie bei A-Z, Zahlen, Unterstrichen und Bindestrichen. Und wie bereits gesagt, achten Sie darauf, dass Ihre IDs eindeutig sind.

Das sollte Ihre erste Sorge sein.

Answer 4

HTML5: Erlaubte Werte für ID- und Klassenattribute

Ab HTML5 sind die einzigen Einschränkungen für den Wert einer ID:

1. muss im Dokument eindeutig sein
2. darf keine Leerzeichen enthalten
3. muss mindestens ein Zeichen enthalten

Für Klassen gelten ähnliche Regeln (abgesehen von der Einzigartigkeit natürlich).

Der Wert kann also aus allen Ziffern, nur aus einer Ziffer, nur aus Satzzeichen, aus Sonderzeichen oder aus anderen Zeichen bestehen. Nur keine Leerzeichen. Das ist ein großer Unterschied zu HTML4.

In HTML 4 müssen ID-Werte mit einem Buchstaben beginnen, auf den nur Buchstaben, Ziffern, Bindestriche, Unterstriche, Doppelpunkte und Punkte folgen dürfen.

In HTML5 sind diese gültig:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id=""> ... </div>
<div id=""> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="¤€~¥"> ... </div>

Denken Sie daran, dass die Verwendung von Zahlen, Satzzeichen oder Sonderzeichen im Wert einer ID in anderen Kontexten (z. B. CSS, JavaScript, Regex) zu Problemen führen kann.

Zum Beispiel ist die folgende ID in HTML5 gültig:

<div id="9lions"> ... </div>

In CSS ist sie jedoch ungültig:

Aus der CSS2.1-Spezifikation:

4.1.3 Zeichen und Gehäuse

In CSS, Kennungen (einschließlich Elementnamen, Klassen und IDs in Selektoren) können nur die Zeichen [a-zA-Z0-9] und ISO 10646 Zeichen U+00A0 und höher, sowie den Bindestrich (-) und den Unterstrich (_); sie dürfen nicht mit einer Ziffer, zwei Bindestrichen oder einem Bindestrich beginnen gefolgt von einer Ziffer .

In den meisten Fällen können Sie Zeichen in Kontexten, in denen sie Einschränkungen oder eine besondere Bedeutung haben, ausblenden.

---

W3C-Referenzen

HTML5

3.2.5.1 Die id Attribut

El id Attribut gibt den eindeutigen Bezeichner (ID) des Elements an.

Der Wert muss unter allen IDs im Home-Teilbaum des Elements eindeutig sein Teilbaum des Elements eindeutig sein und muss mindestens ein Zeichen enthalten. Der Wert darf keine keine Leerzeichen enthalten.

Hinweis: Es gibt keine weiteren Einschränkungen hinsichtlich der Form einer ID; insbesondere Insbesondere können IDs nur aus Ziffern bestehen, mit einer Ziffer beginnen, mit mit einem Unterstrich beginnen, nur aus Satzzeichen bestehen, usw.

3.2.5.7 Die class Attribut

Das Attribut, sofern angegeben, muss einen Wert haben, der eine Reihe von durch Leerzeichen getrennten Token bestehen, die die verschiedenen Klassen repräsentieren, zu denen das Element zugehört.

Die Klassen, die einem HTML-Element zugewiesen sind, bestehen aus allen den Klassen, die zurückgegeben werden, wenn der Wert des Attributs class durch Leerzeichen. (Duplikate werden ignoriert.)

Es gibt keine zusätzlichen Einschränkungen für die Token, die Autoren in Attribut verwenden können, aber die Autoren werden ermutigt, Werte zu verwenden, die die die Natur des Inhalts beschreiben, anstatt Werte zu verwenden, die die gewünschte Darstellung des Inhalts beschreiben.

Answer 5

JQuery tut jeden gültigen ID-Namen behandeln. Sie müssen lediglich Metazeichen (d.h. Punkte, Semikolons, eckige Klammern...) ausschließen. Das ist so, als würde man sagen, dass JavaScript ein Problem mit Anführungszeichen hat, nur weil man nicht schreiben kann

var name = 'O'Hara';

Selektoren in der jQuery-API (siehe Anmerkung unten)