HTML: Gültige ID-Attributwerte?

Beim Erstellen der id Attribute für HTML-Elemente, welche Regeln gibt es für den Wert?

Für HTML4die Antwort lautet technisch:

ID- und NAME-Token müssen mit einem Buchstaben beginnen ([A-Za-z]) und kann von beliebig vielen Buchstaben, Ziffern ([0-9]), Bindestriche (“-“), Unterstriche (“_”), Doppelpunkte (“:”) und Punkte (“.”).

HTML5 ist noch freizügiger und besagt lediglich, dass eine id mindestens ein Zeichen enthalten muss und keine Leerzeichen enthalten darf.

Beim ID-Attribut wird zwischen Groß- und Kleinschreibung unterschieden XHTML.

Aus rein praktischen Gründen möchten Sie vielleicht bestimmte Zeichen vermeiden. Punkte, Doppelpunkte und ‘#’ haben in CSS-Selektoren eine besondere Bedeutung, daher müssen Sie diese Zeichen mit a maskieren Backslash in CSS oder ein doppelter umgekehrter Schrägstrich in a an jQuery übergebene Auswahlzeichenfolge. Denken Sie darüber nach, wie oft Sie ein Zeichen in Ihren Stylesheets oder Code maskieren müssen, bevor Sie mit Punkten und Doppelpunkten in IDs verrückt werden.

Zum Beispiel die HTML-Deklaration <div id="first.name"></div> ist gültig. Sie können dieses Element in CSS als auswählen #first\.name und in jQuery so: $('#first\\.name'). Aber wenn Sie den Backslash vergessen, $('#first.name')haben Sie einen vollkommen gültigen Selektor, der nach einem Element mit ID sucht first und auch Klasse haben name. Dies ist ein Fehler, der leicht zu übersehen ist. Sie könnten auf lange Sicht zufriedener sein, wenn Sie die ID wählen first-name (ein Bindestrich anstelle eines Punkts).

Sie können Ihre Entwicklungsaufgaben vereinfachen, indem Sie sich strikt an eine Namenskonvention halten. Wenn Sie sich zum Beispiel ganz auf Kleinbuchstaben beschränken und Wörter immer entweder mit Bindestrichen oder Unterstrichen trennen (aber nicht beides, wählen Sie einen und verwenden Sie nie den anderen), dann haben Sie ein leicht zu merkendes Muster. Sie werden sich nie fragen: „War es firstName oder FirstName?”, weil Sie immer wissen, dass Sie tippen sollten first_name. Bevorzugen Sie Kamelkoffer? Dann beschränken Sie sich darauf, keine Bindestriche oder Unterstriche, und verwenden Sie für das erste Zeichen immer konsequent entweder Groß- oder Kleinschreibung, mischen Sie diese nicht.

Ein mittlerweile sehr obskures Problem war, dass mindestens ein Browser, Netscape 6, id-Attributwerte wurden fälschlicherweise als Groß-/Kleinschreibung behandelt. Das bedeutete, dass, wenn Sie getippt hatten id="firstName" in Ihrem HTML (kleines ‘f’) und #FirstName { color: red } in Ihrem CSS (großes ‘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 historische Fußnote.

Von dem HTML 4-Spezifikation:

ID- und NAME-Token müssen mit einem Buchstaben beginnen ([A-Za-z]) und kann von beliebig vielen Buchstaben, Ziffern ([0-9]), Bindestriche (“-“), Unterstriche (“_”), Doppelpunkte (“:”) und Punkte (“.”).

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

Technisch gesehen können Sie Doppelpunkte und Punkte in ID-/Namensattributen verwenden, aber ich würde dringend empfehlen, beides zu vermeiden.

In CSS (und mehreren JavaScript-Bibliotheken wie jQuery) haben sowohl der Punkt als auch der Doppelpunkt eine besondere Bedeutung, und Sie werden auf Probleme stoßen, wenn Sie nicht aufpassen. 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 so aus:

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

Was in der CSS-Sprache wirklich heißt: “das Element mit einer ID von ‘my’, einer Klasse von ‘cool’ und dem Pseudoselektor ‘thing'”.

Halten Sie sich auf jeden Fall an Zahlen, Unterstriche und Bindestriche von A bis Z. Und wie oben gesagt, stellen Sie sicher, dass Ihre IDs eindeutig sind.

Das sollte Ihre erste Sorge sein.

HTML5: Zulässige 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

Ähnliche Regeln gelten für Klassen (mit Ausnahme der Eindeutigkeit natürlich).

Der Wert kann also alle Ziffern sein, nur eine Ziffer, nur Satzzeichen, Sonderzeichen enthalten, was auch immer. Nur keine Leerzeichen. Dies unterscheidet sich stark von HTML4.

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

In HTML5 gelten diese:

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

Beispielsweise ist die folgende ID in HTML5 gültig:

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

Es ist jedoch in CSS ungültig:

Aus der CSS2.1-Spezifikation:

4.1.3 Zeichen und Groß-/Kleinschreibung

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

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

W3C-Referenzen

HTML5

3.2.5.1 Die id
Attribut

Der id Das Attribut gibt den eindeutigen Bezeichner (ID) seines Elements an.

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

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

3.2.5.7 Die class
Attribut

Das Attribut muss, falls angegeben, einen Wert haben, der aus einer Reihe von durch Leerzeichen getrennten Token besteht, die die verschiedenen Klassen darstellen, zu denen das Element gehört.

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

Es gibt keine zusätzlichen Einschränkungen für die Token, die Autoren im class-Attribut verwenden können, aber Autoren werden ermutigt, Werte zu verwenden, die die Art des Inhalts beschreiben, anstatt Werte, die die gewünschte Präsentation des Inhalts beschreiben.

jQuery tut jeden gültigen ID-Namen verarbeiten. Sie müssen nur Metazeichen maskieren (zB Punkte, Semikolons, eckige Klammern…). Es ist, als würde man sagen, dass JavaScript ein Problem mit Anführungszeichen hat, nur weil Sie nicht schreiben können

var name="O"Hara';

Selektoren in der jQuery-API (siehe Fußnote)

Streng genommen sollte es passen

[A-Za-z][-A-Za-z0-9_:.]*

Aber jQuery scheint Probleme mit Doppelpunkten zu haben, also könnte es besser sein, sie zu vermeiden.

HTML5:

Es beseitigt die zusätzlichen Beschränkungen für die Ausweis Attribut (siehe hier). Die einzigen verbleibenden Anforderungen (abgesehen davon, dass sie im Dokument eindeutig sind) sind:

1. der Wert muss mindestens ein Zeichen enthalten (darf nicht leer sein)
2. es darf keine Leerzeichen enthalten.

Prä-HTML5:

ID sollte übereinstimmen:

[A-Za-z][-A-Za-z0-9_:.]*

1. Muss Start mit AZ- oder az-Zeichen
2. Kann enthalten - (Bindestrich), _ (unterstreichen), : (Doppelpunkt) und . (Zeitraum)

Aber man sollte es vermeiden : Und . Weil:

Beispielsweise könnte eine ID mit „ab:c“ bezeichnet und im Stylesheet als #ab:c referenziert werden, aber sie könnte nicht nur die ID für das Element sein, sondern auch ID „a“, Klasse „b“, Pseudo bedeuten -Selektor “c”. Es ist am besten, die Verwirrung zu vermeiden und sich von der Verwendung fernzuhalten . Und : insgesamt.