it-swarm-eu.dev

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

Welche Regeln gelten für den Wert, wenn die Attribute id für HTML-Elemente erstellt werden?

1907
Mr Shark

Für HTML 4 lautet die Antwort technisch:

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und dürfen von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").

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

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

Aus rein praktischen Gründen möchten Sie möglicherweise 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 einem doppelten Backslash in maskieren Eine Auswahlzeichenfolge, die an jQuery übergeben wird. Ü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\.name und in jQuery wie folgt auswählen: $('#first\\.name'). Wenn Sie jedoch den umgekehrten Schrägstrich $('#first.name') vergessen, haben Sie einen vollkommen gültigen Selektor, der nach einem Element mit der ID sucht first und auch mit Klasse name. Dies ist ein Fehler, der leicht zu übersehen ist. Möglicherweise sind Sie auf lange Sicht glücklicher, wenn Sie stattdessen die ID first-name (einen Bindestrich anstelle eines Punkts) auswählen.

Sie können Ihre Entwicklungsaufgaben vereinfachen, indem Sie sich strikt an eine Namenskonvention halten. Wenn Sie sich beispielsweise ganz auf Kleinbuchstaben beschränken und Wörter immer 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 wundern, "ob es firstName oder FirstName war?" weil Sie immer wissen, dass Sie first_name eingeben sollten. Bevorzugen Sie Kamelkasten? Dann beschränken Sie sich auf das, keine Bindestriche oder Unterstriche, und verwenden Sie immer entweder Groß- oder Kleinbuchstaben für das erste Zeichen, mischen Sie sie nicht.


Ein jetzt sehr undurchsichtiges Problem war, dass mindestens ein Browser, Netscape 6 , die ID-Attributwerte fälschlicherweise als Groß-/Kleinschreibung behandelte . Wenn Sie also id="firstName" in Ihrem HTML-Code (Kleinbuchstaben 'f') und #FirstName { color: red } in Ihrem CSS-Code (Großbuchstaben 'F') eingegeben hätten, hätte dieser fehlerhafte Browser das nicht eingestellt Elementfarbe zu rot. Zum Zeitpunkt dieser Bearbeitung, April 2015, werden Sie hoffentlich nicht gebeten, Netscape 6 zu unterstützen. Betrachten Sie dies als historische Fußnote.

1621
dgvid

Aus der HTML 4 Spezifikation :

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und dürfen 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.

215
Peter Hilton

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

In CSS (und einigen 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. 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 Ihre CSS-Auswahl folgendermaßen aus:

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

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

Halten Sie sich von A bis Z an Zahlen, Unterstriche und Bindestriche. Und wie oben erwähnt, stellen Sie sicher, dass Ihre IDs eindeutig sind.

Das sollte Ihre erste Sorge sein.

147

jQuery verarbeitet jeden gültigen ID-Namen. Sie müssen nur Metazeichen (d. H. Punkte, Semikolons, eckige Klammern ...) maskieren. Es ist wie zu sagen, dass JavaScript nur deshalb ein Problem mit Anführungszeichen hat, weil Sie nicht schreiben können

var name = 'O'Hara';

Selektoren in der jQuery-API (siehe Anmerkung unten)

64

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

61
Mr Shark

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 passen:

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

aber man sollte : und . vermeiden, weil:

Eine ID könnte beispielsweise mit "ab: c" bezeichnet und im Stylesheet als "#ab: c" referenziert werden. Sie könnte jedoch nicht nur die ID für das Element sein, sondern auch ID "a", Klasse "b", Pseudo Selektor "c". Vermeiden Sie am besten die Verwirrung und vermeiden Sie die Verwendung. und: insgesamt.

54
Zaheer Ahmed

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 aus allen Ziffern bestehen, nur aus einer Ziffer, nur aus Interpunktionszeichen, einschließlich Sonderzeichen. 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>

Denken Sie daran, dass die Verwendung von Zahlen, Satzzeichen oder Sonderzeichen im Wert einer ID in anderen Kontexten (z. B. CSS, JavaScript, Regex) Probleme verursachen 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 Groß-/Kleinschreibung

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 enthalten 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 ist es möglich, dass Sie Zeichen in Kontexten mit Einschränkungen oder besonderer Bedeutung entkommen können.


W3C-Referenzen

HTML5

3.2.5.1 Das id Attribut

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

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

Hinweis: Es gibt keine weiteren Einschränkungen, wie eine ID aussehen kann. 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 Das class Attribut

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

Die Klassen, denen ein HTML-Element zugewiesen ist, 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.

49
Michael_B

In der Praxis verwenden viele Sites id Attribute, die mit Zahlen beginnen, obwohl dies technisch kein gültiges HTML ist.

Die HTML 5-Entwurfsspezifikation lockert die Regeln für die Attribute id und name auf: Es handelt sich nur noch um undurchsichtige Zeichenfolgen, die keine Leerzeichen enthalten dürfen.

33
pdc

Bindestriche, Unterstriche, Punkte, Doppelpunkte, Zahlen und Buchstaben sind für die Verwendung mit CSS und JQuery gültig. Das Folgende sollte funktionieren, es 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>
30
blacksun1

HTML5

Beachten Sie, dass die ID eindeutig sein muss, d. H. Ein Dokument darf nicht mehrere Elemente mit derselben ID enthalten.

Die Regeln für ID-Inhalte in HTML5 sind (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 der 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)
24
Sergio

Um auf eine ID mit einem Punkt zu verweisen, müssen Sie einen Backslash verwenden. Nicht sicher, ob es für Bindestriche oder Unterstriche gleich ist. Zum Beispiel: HTML

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

CSS

#maintenance\.instrumentNumber{Word-wrap:break-Word;}
18
Anthony

Vergessen Sie auch nie, dass eine ID eindeutig ist. Nach der Verwendung wird der ID-Wert möglicherweise an keiner Stelle im Dokument erneut angezeigt.

Sie können viele IDs haben, 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.

15
Vordreller

Aus der HTML 4-Spezifikation ...

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und dürfen von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").

EDIT: oh! Nochmal auf den Knopf geschlagen!

15
Steve Morgan

Ein eindeutiger Bezeichner für das Element.

Ein Dokument darf nicht mehrere Elemente mit derselben ID enthalten.

Beliebige Zeichenfolge mit folgenden Einschränkungen:

  1. muss mindestens ein Zeichen lang sein
  2. darf keine Leerzeichen enthalten:

    • U + 0020 SPACE
    • U + 0009 CHARACTER TABULATION (tab)
    • U + 000A LINE FEED (LF)
    • U + 000C FORM FEED (FF)
    • U + 000D CARRIAGE RETURN (CR)

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

12
Bhavin Solanki

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

9
lstg

für HTML5

Der Wert muss unter allen IDs im Ausgangsunterbaum 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 Akzenten. Es gibt uns auch viel mehr Munition, mit der wir in den Fuß schießen können, da Sie jetzt ID-Werte verwenden können, die sowohl mit CSS als auch mit JavaScript Probleme verursachen, sofern Sie nicht besonders vorsichtig sind.

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

7
Tazwar Utshas
  1. IDs eignen sich am besten zur Benennung von Teilen Ihres Layouts und sollten daher für ID und Klasse nicht denselben Namen haben
  2. ID erlaubt alphanumerische und Sonderzeichen
  3. vermeiden Sie jedoch die Verwendung von # : . * ! Symbolen
  4. nicht erlaubte Leerzeichen
  5. begonnen wurde nicht mit Zahlen oder einem Bindestrich gefolgt von einer Ziffer
  6. groß- und Kleinschreibung beachten
  7. die Verwendung von ID-Selektoren ist schneller als die Verwendung von Klassen-Selektoren
  8. verwenden Sie den Bindestrich "-" (Unterstrich "_" kann auch verwendet werden, ist aber für SEO nicht geeignet) für lange CSS-Klassen- oder ID-Regelnamen
  9. Wenn eine Regel einen ID-Selektor als Schlüssel-Selektor 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 für Folgendes verwendet werden: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

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

5
Wembo Mulumba

werte können sein: [a-z], [A-Z], [0-9], [* _: -]

es wird für HTML5 verwendet ...

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

In HTML

ID sollte mit {AZ} oder {az} beginnen. Sie können Ziffern, Punkte, Bindestriche, Unterstriche, 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 obwohl Sie IDs mit Doppelpunkten (:) oder Punkt (.) Erstellen können, ist es für CSS schwierig, diese IDs als Selektor zu verwenden. Hauptsächlich, wenn Sie Pseudoelemente verwenden möchten (: vorher,: nachher).

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

1
Dev pokhariya