Vraag Wat zijn geldige waarden voor het id-kenmerk in HTML?


Bij het maken van de id attributen voor HTML-elementen, welke regels zijn er voor de waarde?


1707
2017-09-16 09:08


oorsprong


antwoorden:


Voor HTML 4, het antwoord is technisch:

ID- en NAME-tokens moeten beginnen met een letter ([A-Za-z]) en kunnen worden gevolgd door een willekeurig aantal letters, cijfers ([0-9]), koppeltekens ("-"), underscores ("_") , dubbele punten (":") en punten (".").

HTML 5 is zelfs meer toegeeflijk, door alleen te zeggen dat een ID ten minste één karakter moet bevatten en geen spatie karakters mag bevatten.

Het kenmerk id is hoofdlettergevoelig XHTML.

Als een puur praktische kwestie, wilt u misschien bepaalde karakters vermijden. Periodes, dubbele punten en '#' hebben een speciale betekenis in CSS-selectors, dus u zult met die tekens aan die tekens moeten ontsnappen backslash in CSS of een dubbele backslash in a selector string doorgegeven aan jQuery. Bedenk eens hoe vaak je aan een personage in je stylesheets of code moet ontsnappen voordat je gek wordt met perioden en dubbele punten in id's.

Bijvoorbeeld de HTML-verklaring <div id="first.name"></div> is geldig. U kunt dat element in CSS selecteren als #first\.name en in jQuery als volgt: $('#first\\.name'). Maar als je de backslash vergeet, $('#first.name'), je hebt een perfect geldige selector op zoek naar een element met id first en ook les hebben name. Dit is een bug die gemakkelijk over het hoofd wordt gezien. U kunt op de lange termijn gelukkiger zijn door de ID te kiezen first-name (in plaats daarvan een koppelteken in plaats van een punt).

U kunt uw ontwikkelingstaken vereenvoudigen door strikt vast te houden aan een naamgevingsconventie. Als u zich bijvoorbeeld geheel beperkt tot kleine letters en woorden altijd scheidt met koppeltekens of onderstrepingstekens (maar niet beide, kies er één en gebruik nooit de andere), dan hebt u een gemakkelijk te onthouden patroon. Je zult je nooit afvragen "was het firstName of FirstName? "omdat je altijd weet dat je moet typen first_name. Liever een kamelenkoker? Beperk je dan tot dat, geen afbreekstreepjes of onderstrepingstekens, en gebruik altijd, altijd hoofdletters of kleine letters voor het eerste personage, meng ze niet.


Een nu zeer obscuur probleem was dat minstens één browser, Netscape 6, onjuist behandelde id-attribuutwaarden als hoofdlettergevoelig. Dat betekende dat als je had getypt id="firstName" in uw HTML (kleine letters 'f') en #FirstName { color: red } in uw CSS (hoofdletter 'F'), zou die browser met buggy de kleur van het element niet in rood hebben ingesteld. Op het moment van deze bewerking, april 2015, hoop ik dat je niet wordt gevraagd om Netscape 6 te ondersteunen. Beschouw dit als een historische voetnoot.


1487
2017-09-17 01:42



Van de HTML 4-specificatie:

ID- en NAME-tokens moeten beginnen met een letter ([A-Za-z]) en kunnen worden gevolgd door een willekeurig aantal letters, cijfers ([0-9]), koppeltekens ("-"), underscores ("_") , dubbele punten (":") en punten (".").

Een veelgemaakte fout is het gebruik van een ID die begint met een cijfer.


194
2017-09-16 09:09



U kunt dubbelkolommen en punten in id / name-kenmerken technisch gebruiken, maar ik raad u aan beide te vermijden.

In CSS (en verschillende JavaScript-bibliotheken zoals jQuery) hebben zowel de punt als de dubbele punt een speciale betekenis en kom je problemen tegen als je niet voorzichtig bent. Periodes zijn class selectors en dubbele punten zijn pseudo-selectors (bijv., ": Hover" voor een element wanneer de muis erboven staat).

Als u een element de id "my.cool:thing" geeft, ziet uw CSS-selector er als volgt uit:

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

Wat eigenlijk zegt: "het element met een id van 'mijn', een klasse van 'cool' en de 'ding' pseudo-selector 'in CSS-taal.

Blijf bij A-Z van elk geval, cijfers, onderstrepingstekens en koppeltekens. En zoals gezegd, zorg ervoor dat uw id's uniek zijn.

Dat zou je eerste zorg moeten zijn.


130
2017-09-16 14:01



jQuery doet omgaan met een geldige ID-naam. U hoeft alleen te ontsnappen aan metatekens (d.w.z. punten, puntkomma's, vierkante haken ...). Het is hetzelfde als zeggen dat JavaScript alleen een probleem met offertes heeft omdat je niet kunt schrijven

var name = 'O'Hara';

Selectors in jQuery API (zie onderste opmerking)


60
2018-01-10 20:40



Strikt moet het overeenkomen

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

Maar jQuery lijkt problemen te hebben met dubbele punten, dus het is misschien beter om ze te vermijden.


51
2017-09-16 09:11



HTML5:

verwijdert de extra beperkingen voor het id-kenmerk kijk hier. De enige resterende vereisten (behalve dat ze uniek zijn in het document) zijn:

  1. de waarde moet minimaal één teken bevatten (kan niet leeg zijn)
  2. het mag geen spatie karakters bevatten.

PRE-HTML5:

ID moet overeenkomen:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Moet beginnen met A-Z of a-z-tekens
  2. Kan bevatten - (koppelteken), _ (laag streepje), : (colon) en . (periode)

maar men zou moeten vermijden : en . beacause:

Een ID kan bijvoorbeeld worden aangeduid als "ab: c" en in de stijlpagina worden vermeld als #ab: c maar als id voor het element kan dit ook betekenen id "a", klasse "b", pseudo- selector "c". Het beste om de verwarring te voorkomen en blijf weg van het gebruik. en: helemaal.


39
2018-01-18 07:09



HTML5: Toegestane waarden voor ID & Klasse-kenmerken

Vanaf HTML5 zijn de enige beperkingen voor de waarde van een ID:

  1. moet uniek zijn in het document
  2. mag geen spaties bevatten
  3. moet ten minste één teken bevatten

Soortgelijke regels zijn van toepassing op klassen (met uitzondering van de uniciteit, natuurlijk).

Dus de waarde kan bestaan ​​uit alle cijfers, slechts één cijfer, alleen interpunctietekens, speciale tekens, wat dan ook. Gewoon geen spatie. Dit is heel anders dan HTML4.

In HTML 4 moeten ID-waarden beginnen met een letter, die vervolgens alleen kan worden gevolgd door letters, cijfers, koppeltekens, underscores, dubbele punten en punten.

In HTML5 zijn deze geldig:

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

Houd er rekening mee dat het gebruik van getallen, interpunctie of speciale tekens in de waarde van een ID problemen kan veroorzaken in andere contexten (bijvoorbeeld CSS, JavaScript, regex).

De volgende ID is bijvoorbeeld geldig in HTML5:

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

Het is echter ongeldig in CSS:

Van de CSS2.1-specificatie:

4.1.3 Personages en hoofdletters

In CSS, identifiers (inclusief elementnamen, klassen en ID's in   selectors) kan alleen de tekens [a-zA-Z0-9] en ISO 10646 bevatten   tekens U + 00A0 en hoger, plus het koppelteken (-) en het onderstrepingsteken   (_); ze kunnen niet beginnen met een cijfer, twee koppeltekens of een koppelteken   gevolgd door een cijfer.

In de meeste gevallen kun je tekens in contexten waar ze beperkingen of speciale betekenis hebben, ontlopen.


W3C-verwijzingen

HTML5

3.2.5.1 Het id   attribuut

De id attribuut specificeert de unieke identifier (ID) van het element.

De waarde moet uniek zijn tussen alle ID's in het huis van het element   subtree en moet ten minste één karakter bevatten. De waarde mag niet   bevatten spatie karakters.

Opmerking: er zijn geen andere beperkingen aan de vorm van een ID; in   in het bijzonder, ID's kunnen bestaan ​​uit alleen cijfers, beginnen met een cijfer, start   met een onderstrepingsteken, bestaat uit alleen interpunctie, etc.

3.2.5.7 class   attribuut

Het kenmerk, indien opgegeven, moet een waarde hebben die bestaat uit een set   ruimte-gescheiden tokens die de verschillende klassen vertegenwoordigen die de   element hoort bij.

De klassen waaraan een HTML-element is toegewezen, bestaat uit allemaal   de klassen geretourneerd wanneer de waarde van het kenmerk class zich splitst   ruimten. (Duplicaten worden genegeerd.)

Er zijn geen aanvullende beperkingen voor de tokens die auteurs kunnen gebruiken   het class-kenmerk, maar auteurs worden aangemoedigd om waarden te gebruiken die   beschrijf de aard van de inhoud, eerder dan de waarden die beschrijven   de gewenste presentatie van de inhoud.


33
2017-08-02 15:53



In de praktijk gebruiken veel sites id kenmerken beginnend met getallen, ook al is dit technisch gezien geen geldige HTML.

De HTML 5 conceptspecificatie maakt de regels voor de id en name attributen: het zijn nu gewoon ondoorzichtige strings die geen spaties kunnen bevatten.


28
2017-09-16 10:04



Verbindingen, onderstrepingstekens, punten, dubbele punten, cijfers en letters zijn allemaal geldig voor gebruik met CSS en JQuery. Het volgende zou moeten werken, maar het moet uniek zijn op de hele pagina en ook beginnen met een letter [A-Za-z].

Werken met dubbele punten en punten heeft wat meer werk nodig, maar je kunt het doen zoals het volgende voorbeeld laat zien.

<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

Houd in gedachten dat ID uniek moet zijn, dat wil zeggen. er mogen niet meerdere elementen in een document zijn met dezelfde id-waarde.

De regels voor ID-inhoud in HTML5 zijn (behalve dat ze uniek zijn):

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.

Dit is de W3 spec over ID (van 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).

Meer informatie:

  • W3 - globale kenmerken (id)
  • MDN een eerbetoon (id)

18
2017-08-26 21:54