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

idWelche Regeln gibt es beim Erstellen der Attribute für HTML-Elemente für den Wert?

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 ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").

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

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

Aus rein praktischen Gründen möchten Sie möglicherweise bestimmte Zeichen vermeiden. Punkte, Doppelpunkte und '#' haben in CSS-Selektoren eine besondere Bedeutung. Sie müssen diese Zeichen daher mit einem Backslash in CSS oder einem doppelten Backslash in einer an jQuery übergebenen Auswahlzeichenfolge umgehen . Überlegen Sie, wie oft Sie einem Zeichen in Ihren Stylesheets oder Ihrem Code entkommen müssen, bevor Sie mit Punkten und Doppelpunkten in IDs verrückt werden.

Beispielsweise ist die HTML-Deklaration <div id="first.name"></div>gültig. Sie können dieses Element in CSS als #first\.nameund in jQuery wie folgt auswählen : $('#first\\.name').Wenn Sie jedoch den Backslash vergessen, $('#first.name')haben Sie einen vollkommen gültigen Selektor, der nach einem Element mit ID sucht firstund auch eine Klasse hat name. Dies ist ein Fehler, der leicht zu übersehen ist. Auf lange Sicht könnten Sie glücklicher sein, wenn Sie stattdessen die ID first-name(eher einen Bindestrich als einen Punkt) wählen .

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 entweder durch Bindestriche oder Unterstriche trennen (aber nicht beide, wählen Sie einen aus und verwenden Sie niemals den anderen), haben Sie ein leicht zu merkendes Muster. Sie werden sich nie fragen: "War es firstNameoder FirstName?" weil Sie immer wissen, dass Sie tippen sollten first_name. Kamelkoffer bevorzugen? Dann beschränken Sie sich darauf, keine Bindestriche oder Unterstriche, und verwenden Sie immer konsequent Groß- oder Kleinbuchstaben für das erste Zeichen. Mischen Sie sie nicht.

Ein jetzt sehr dunkles Problem war, dass mindestens ein Browser, Netscape 6, ID-Attributwerte fälschlicherweise als Groß- und Kleinschreibung behandelte . Das heißt, wenn Sie id="firstName"Ihr HTML (Kleinbuchstaben 'f') und #FirstName { color: red }Ihr CSS (Großbuchstaben 'F') eingegeben hätten, 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.

Aus der 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 ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").

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

Sie können Doppelpunkte und Punkte technisch in ID / Name-Attributen verwenden, aber ich würde dringend empfehlen, beide 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 vorsichtig sind. Perioden 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 folgendermaßen aus:

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

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

Halten Sie sich in jedem Fall an AZ, Zahlen, Unterstriche und Bindestriche. Und wie oben erwähnt, stellen Sie sicher, dass Ihre IDs eindeutig sind.

Das sollte Ihr erstes Anliegen sein.

jQuery hat jeden gültigen ID - Namen handhaben . Sie müssen nur den Metazeichen (dh Punkten, Semikolons, eckigen Klammern ...) entkommen. Es ist so, als hätte JavaScript nur deshalb ein Problem mit Anführungszeichen, weil Sie nicht schreiben können

var name = 'O'Hara';

Selektoren in der jQuery-API (siehe untere Anmerkung)

Genau genommen sollte es passen

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

Aber jquery scheint Probleme mit Doppelpunkten zu haben, daher ist es möglicherweise besser, sie zu vermeiden.

HTML5:

beseitigt die zusätzlichen Einschränkungen für das ID-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.

PRE-HTML5:

ID sollte übereinstimmen:

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

1. Muss mit AZ- oder Az-Zeichen beginnen
2. Kann -(Bindestrich), _(Unterstrich), :(Doppelpunkt) und .(Punkt) enthalten

aber man sollte vermeiden :und .weil:

Beispielsweise könnte eine ID mit "ab: c" gekennzeichnet und im Stylesheet als #ab: c bezeichnet werden. Sie könnte jedoch nicht nur die ID für das Element sein, sondern auch die ID "a", die Klasse "b", pseudo- Wahlschalter "c". Vermeiden Sie am besten Verwirrung und vermeiden Sie die Verwendung. und: insgesamt.

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 Einzigartigkeit natürlich).

Der Wert kann also aus allen Ziffern bestehen, nur aus einer Ziffer, nur aus Satzzeichen und Sonderzeichen. Nur kein Leerzeichen. Dies unterscheidet sich stark 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>

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.

Beispielsweise ist die folgende ID in HTML5 gültig:

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

In CSS ist es jedoch ungültig:

Aus der CSS2.1-Spezifikation:

4.1.3 Zeichen und Fall

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

W3C-Referenzen

HTML5

3.2.5.1 Das id Attribut

Das idAttribut gibt die eindeutige ID (ID) des Elements an.

Der Wert muss unter allen IDs im Home-Teilbaum 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 einer ID. Insbesondere können IDs nur aus Ziffern bestehen, mit einer Ziffer beginnen, mit einem Unterstrich beginnen, nur aus Interpunktion bestehen usw.

3.2.5.7 Das class Attribut

Das Attribut muss, falls angegeben, einen Wert haben, bei dem es sich um eine Reihe von durch Leerzeichen getrennten Token handelt, die die verschiedenen Klassen darstellen, zu denen das Element gehört.

Die Klassen, die ein HTML-Element ihm zugewiesen hat, bestehen aus allen Klassen, die zurückgegeben werden, wenn der Wert des Klassenattributs auf Leerzeichen aufgeteilt wird. (Duplikate werden ignoriert.)

Es gibt keine zusätzlichen Einschränkungen für die Token, die Autoren im Klassenattribut verwenden können. Autoren werden jedoch aufgefordert, Werte zu verwenden, die die Art des Inhalts beschreiben, anstatt Werte, die die gewünschte Darstellung des Inhalts beschreiben.

In der Praxis verwenden viele Websites idAttribute, die mit Zahlen beginnen, obwohl dies technisch gesehen kein gültiger HTML-Code ist.

Die HTML 5-Entwurfsspezifikation lockert die Regeln für die Attribute idund name: Sie sind jetzt nur noch undurchsichtige Zeichenfolgen, die keine Leerzeichen enthalten dürfen.

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

Das Arbeiten mit Doppelpunkten und Punkten erfordert etwas mehr Arbeit, aber Sie können dies 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>

HTML5

Beachten Sie, dass die ID eindeutig sein muss, d. H. Ein Dokument darf nicht mehrere Elemente enthalten, die denselben ID-Wert haben.

Die Regeln für ID-Inhalte in HTML5 lauten (abgesehen davon, dass sie eindeutig 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 die W3- Spezifikation zur 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 atribute (id)

Um auf eine ID mit einem Punkt darin zu verweisen, müssen Sie einen Backslash verwenden. Ich bin mir nicht sicher, ob dies für Bindestriche oder Unterstriche gleich ist. Zum Beispiel: HTML

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

CSS

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

Aus der 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 ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").

EDIT: d'oh! Wieder auf den Knopf geschlagen!

Vergessen Sie auch niemals, dass eine ID eindeutig ist. Nach der Verwendung wird der ID-Wert möglicherweise nirgendwo im Dokument erneut angezeigt.

Möglicherweise haben Sie viele IDs, aber alle müssen einen eindeutigen Wert haben.

Auf der anderen Seite gibt es das Klassenelement. Genau wie ID kann es viele Male vorkommen, aber der Wert kann immer wieder verwendet werden.

Eine eindeutige Kennung für das Element.

Ein Dokument darf nicht mehrere Elemente enthalten, die denselben ID-Wert haben.

Beliebige Zeichenfolge mit den folgenden Einschränkungen:

1. muss mindestens ein Zeichen lang sein

2. darf keine Leerzeichen enthalten:

   • U + 0020 SPACE
   • U + 0009 CHARAKTERTABELLIERUNG (Registerkarte)
   • U + 000A LINE FEED (LF)
   • U + 000C FORM FEED (FF)
   • U + 000D WAGENRÜCKGABE (CR)

Die Verwendung von Zeichen außer ASCII letters and digits, '_', '-' and '.'kann zu Kompatibilitätsproblemen führen, da sie nicht zugelassen wurden HTML 4. Obwohl diese Einschränkung aufgehoben wurde HTML 5, sollte eine ID aus Kompatibilitätsgründen mit einem Buchstaben beginnen.

Es scheint, dass Doppelpunkte (:) und Punkte (.) In der HTML-Spezifikation zwar gültig sind, jedoch als ID-Selektoren in CSS ungültig sind. Daher sollten Sie sie am besten vermeiden, wenn Sie sie für diesen Zweck verwenden möchten.

zum HTML5

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

Mindestens ein Zeichen, keine Leerzeichen.

Dies öffnet die Tür für gültige Anwendungsfälle wie die Verwendung von Zeichen mit Akzent. Es gibt uns auch viel mehr Munition, mit der wir uns in den Fuß schießen können, da Sie jetzt ID-Werte verwenden können, die Probleme mit CSS und JavaScript verursachen, sofern Sie nicht wirklich vorsichtig sind.

1. IDs eignen sich am besten zum Benennen von Teilen Ihres Layouts und sollten daher nicht den gleichen Namen für ID und Klasse enthalten
2. ID erlaubt alphanumerische Zeichen und Sonderzeichen
3. Vermeiden Sie jedoch die Verwendung von # : . * !Symbolen
4. nicht erlaubte Leerzeichen
5. nicht mit Zahlen oder einem Bindestrich gefolgt von einer Ziffer begonnen
6. Groß- und Kleinschreibung beachten
7. Die Verwendung von ID-Selektoren ist schneller als die Verwendung von Klassenselektoren
8. Verwenden Sie für lange CSS-Klassen- oder ID-Regelnamen den Bindestrich "-" (Unterstrich "_" kann ebenfalls verwendet werden, ist jedoch nicht für SEO geeignet)
9. Wenn eine Regel einen ID-Selektor als Schlüsselselektor hat, fügen Sie der Regel keinen Tag-Namen hinzu. Da IDs eindeutig sind, würde das Hinzufügen eines Tag-Namens den Abgleich unnötig verlangsamen.
10. In HTML5 kann das id-Attribut für jedes HTML-Element verwendet werden, und in HTML 4.01 kann das id-Attribut nicht verwendet werden mit: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Jeder alphanumerische Wert und " - " und " _ " ist gültig. Sie sollten den ID-Namen jedoch mit einem beliebigen Zeichen zwischen AZ oder az beginnen .

Keine Leerzeichen, muss mit mindestens einem Zeichen von a bis z und 0 bis 9 beginnen.

In HTML

Die ID sollte mit {AZ} oder {az} beginnen. Sie können Ziffern, Punkte, Bindestriche, Unterstriche und Doppelpunkte hinzufügen.

Zum Beispiel:

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

Aber auch wenn Sie eine ID mit Doppelpunkten (:) oder Punkt (.) Erstellen können, ist es für CSS schwierig , diese ID als Auswahl zu verwenden. Hauptsächlich, wenn Sie Pseudo-Elemente verwenden möchten (: vorher ,: nachher).

Auch in JS ist es schwierig, diese IDs auszuwählen. Sie sollten also die ersten vier IDs verwenden. Wie von vielen Entwicklern bevorzugt, und wenn es erforderlich ist, können Sie auch die letzten beiden verwenden.

Werte können sein: [az], [AZ], [0-9], [* _: -]

es wird für HTML5 verwendet ...

Wir können ID mit jedem Tag hinzufügen.

Seit ES2015 können wir auch fast alle Unicode-Zeichen für IDs verwenden, wenn der Dokumentzeichensatz auf UTF8 eingestellt ist.

Testen Sie hier: https://mothereff.in/js-variables

Lesen Sie mehr über: https://mathiasbynens.be/notes/javascript-identifiers-es6

In ES2015 müssen Bezeichner mit $, _ oder einem beliebigen Symbol mit der von Unicode abgeleiteten Kerneigenschaft ID_Start beginnen.

Der Rest des Bezeichners kann $, _, U + 200C Nicht-Joiner mit Nullbreite, U + 200D Null-Breite-Joiner oder ein beliebiges Symbol mit der von Unicode abgeleiteten Kerneigenschaft ID_Continue enthalten.

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"

div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}

<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">

Solltest du es benutzen? Wahrscheinlich keine gute Idee!

Lesen Sie mehr über: https://stackoverflow.com/a/52799593/2494754

Alphabete->
Großbuchstaben & kleine Ziffern-> 0-9
Sonderzeichen-> ':', '-', '_', '.'

Das Format sollte entweder mit '.' beginnen. oder ein Alphabet, gefolgt von einem der Sonderzeichen von mehr Alphabeten oder Zahlen. Der Wert des ID-Feldes darf nicht mit einem '_' enden.
Außerdem sind Leerzeichen nicht zulässig, sofern sie bereitgestellt werden. Sie werden als unterschiedliche Werte behandelt, was bei den ID-Attributen nicht gültig ist.