Frage Was sind gültige Werte für das ID-Attribut in HTML?


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


1707
2017-09-16 09:08


Ursprung


Antworten:


Zum HTML 4Die Antwort ist technisch:

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von beliebig vielen Buchstaben, Ziffern ([0-9]), Bindestrichen ("-"), Unterstrichen ("_") gefolgt werden , Doppelpunkte (":") und Punkte (".").

HTML 5 ist noch permissiver und sagt nur, dass eine ID mindestens ein Zeichen enthalten muss und keine Leerzeichen enthalten darf.

Das ID-Attribut unterscheidet zwischen Groß- und Kleinschreibung XHTML.

Aus rein praktischen Gründen sollten Sie bestimmte Zeichen vermeiden. Perioden, Doppelpunkte und '#' haben in CSS-Selektoren eine besondere Bedeutung, daher müssen Sie diese Zeichen mit a umgehen Backslash in CSS oder ein doppelter Backslash in a Selektor-String an jQuery übergeben. Denken Sie darüber nach, wie oft Sie einem Zeichen in Ihren Stylesheets oder Code entkommen 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 wie folgt: $('#first\\.name'). Aber wenn Sie den Backslash vergessen, $('#first.name'), Sie werden einen vollkommen gültigen Selektor haben, der nach einem Element mit ID sucht first und auch Klasse name. Dies ist ein Fehler, der leicht zu übersehen ist. Sie könnten auf lange Sicht glücklicher sein, die ID zu wählen first-name (stattdessen ein Bindestrich statt einer Periode).

Sie können Ihre Entwicklungsaufgaben vereinfachen, indem Sie sich strikt an eine Namenskonvention halten. Wenn Sie sich beispielsweise ausschließlich auf Kleinbuchstaben beschränken und Wörter immer mit Bindestrichen oder Unterstrichen trennen (aber nicht beide, wählen Sie einen aus 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. Camel Case bevorzugen? Beschränken Sie sich darauf, keine Bindestriche oder Unterstriche, und verwenden Sie für das erste Zeichen immer Groß- und Kleinbuchstaben, mischen Sie sie nicht.


Ein jetzt sehr obskures Problem war, dass mindestens ein Browser, Netscape 6, falsch behandelte ID-Attributwerte, bei denen die Groß- / Kleinschreibung beachtet wird. Das bedeutete, wenn du getippt hättest id="firstName" in Ihrem HTML (Kleinbuchstaben 'f') und #FirstName { color: red } in Ihrem CSS (Großbuchstabe "F") hätte dieser Buggy-Browser die Farbe des Elements nicht auf Rot gesetzt. Zum Zeitpunkt dieser Bearbeitung, April 2015, hoffe ich, dass Sie nicht gebeten werden, Netscape 6 zu unterstützen. Betrachten Sie dies als eine historische Fußnote.


1487
2017-09-17 01:42



Von dem HTML 4 Spezifikation:

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von beliebig vielen Buchstaben, Ziffern ([0-9]), Bindestrichen ("-"), Unterstrichen ("_") gefolgt werden , Doppelpunkte (":") und Punkte (".").

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


194
2017-09-16 09:09



Sie können Doppelpunkte und Punkte in ID / Name-Attributen technisch verwenden, aber ich würde stark empfehlen, beides zu vermeiden.

In CSS (und mehreren JavaScript-Bibliotheken wie jQuery) haben sowohl der Punkt als auch der Doppelpunkt eine besondere Bedeutung und es kommt zu Problemen, wenn Sie nicht vorsichtig sind. Perioden sind Klassenselektoren und Doppelpunkte sind Pseudo-Selektoren (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 */ ... }

Was wirklich sagt, "das Element mit einer ID von 'mein', eine Klasse von 'cool' und der 'Ding' Pseudo-Selektor" in CSS-Sprache.

Bleiben Sie bei A-Z in jedem Fall, Zahlen, Unterstrichen und Bindestrichen. Und wie oben erwähnt, stellen Sie sicher, dass Ihre IDs eindeutig sind.

Das sollte deine erste Sorge sein.


130
2017-09-16 14:01



jQuery tut Behandle jeden gültigen ID-Namen. Sie müssen nur Metazeichen (d. H. Punkte, Semikolons, eckige Klammern ...) entkommen. Es ist so, als würde JavaScript nur deshalb ein Problem mit Anführungszeichen haben, weil Sie nicht schreiben können

var name = 'O'Hara';

Selektoren in der jQuery API (siehe unten)


60
2018-01-10 20:40



Streng sollte es zusammenpassen

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

Aber jQuery scheint Probleme mit Doppelpunkten zu haben, daher ist es besser, sie zu vermeiden.


51
2017-09-16 09:11



HTML5:

beseitigt die zusätzlichen Einschränkungen für das ID-Attribut siehe hier. Die einzigen noch verbleibenden Anforderungen (abgesehen davon, dass sie im Dokument einzigartig sind) sind:

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

Vor-HTML5:

ID sollte übereinstimmen:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Muss mit A-Z oder a-z Zeichen beginnen
  2. Kann enthalten - (Bindestrich), _ (unterstreichen), : (Doppelpunkt) und . (Zeitraum)

aber man sollte es vermeiden : und . beacause:

Zum Beispiel könnte eine ID mit "ab: c" bezeichnet werden und im Stylesheet als #ab: c referenziert werden, aber genauso wie die ID für das Element, könnte sie ID "a", Klasse "b", Pseudo- Wahlschalter "c". Am besten, um die Verwirrung zu vermeiden und von der Verwendung fern zu bleiben. und: insgesamt.


39
2018-01-18 07:09



HTML5: Zulässige Werte für ID- und Klassenattribute

Ab HTML5 gelten folgende 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, nur eine Ziffer, nur Interpunktionszeichen, Sonderzeichen, was auch immer sein. Nur kein Leerzeichen. Dies unterscheidet sich sehr von HTML4.

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

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>

Bedenken Sie jedoch, 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.

Die folgende ID ist beispielsweise 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 Fall

In CSS, Identifikatoren (einschließlich Elementnamen, Klassen und IDs in   Selektoren) können nur die Zeichen [a-zA-Z0-9] und ISO 10646 enthalten   Zeichen U + 00A0 und höher, plus Bindestrich (-) und Unterstrich   (_); Sie können 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 entkommen, in denen sie Einschränkungen oder besondere Bedeutung haben.


W3C Referenzen

HTML5

3.2.5.1 id   Attribut

Das id Attribut gibt die eindeutige Kennung (ID) seines Elements an.

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

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

3.2.5.7 class   Attribut

Das Attribut muss, falls angegeben, einen Wert haben, der eine Menge von ist   durch Leerzeichen getrennte Token, die die verschiedenen Klassen darstellen, die der   Element gehört zu.

Die Klassen, denen ein HTML-Element zugeordnet ist, bestehen aus allen   Die Klassen werden zurückgegeben, wenn der Wert des Klassenattributs geteilt wird   Räume. (Duplikate werden ignoriert.)

Es gibt keine zusätzlichen Einschränkungen für die Token, mit denen Autoren arbeiten können   das Klassenattribut, aber Autoren werden ermutigt, Werte zu verwenden, die   Beschreiben Sie die Art des Inhalts und nicht die Werte, die beschreiben   die gewünschte Präsentation des Inhalts.


33
2017-08-02 15:53



In der Praxis verwenden viele Websites id Attribute beginnend mit Zahlen, obwohl dies technisch nicht valide HTML ist.

Das HTML 5 Entwurfsspezifikation lockert die Regeln für die id und name Attribute: Sie sind jetzt nur undurchsichtige Zeichenfolgen, die keine Leerzeichen enthalten können.


28
2017-09-16 10:04



Bindestriche, Unterstriche, Punkte, Doppelpunkte, Zahlen und Buchstaben sind für die Verwendung mit CSS und JQuery gültig. Folgendes sollte funktionieren, aber es muss auf der ganzen Seite eindeutig sein und muss auch mit einem Buchstaben beginnen [A-Za-z].

Die Arbeit mit Doppelpunkten und Punkten benötigt ein bisschen mehr Arbeit, aber Sie können es tun, wie das folgende Beispiel zeigt.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

25
2017-07-07 10:09



HTML5

Beachten Sie, dass ID muss eindeutig sein, dh. Es darf nicht mehrere Elemente in einem Dokument geben, die denselben ID-Wert haben.

Die Regeln für den ID-Inhalt in HTML5 sind (abgesehen davon, dass sie einzigartig sind):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

Dies ist das W3 spec über ID (von MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

Mehr Info:

  • W3 - globale Attribute (id)
  • MDN eine Abgabe (id)

18
2017-08-26 21:54



Um auf eine ID mit einem Punkt zu verweisen, müssen Sie einen umgekehrten Schrägstrich verwenden. Nicht sicher, ob es sich um Bindestriche oder Unterstriche handelt. Beispielsweise: HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

16
2017-11-13 20:14