Quali sono i valori validi per l'attributo id in HTML?

Quando si creano gli idattributi per gli elementi HTML, quali sono le regole per il valore?

Per HTML 4 , la risposta è tecnicamente:

I token ID e NAME devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da un numero qualsiasi di lettere, cifre ([0-9]), trattini ("-"), caratteri di sottolineatura ("_") , due punti (":") e punti (".").

HTML 5 è ancora più permissivo, dicendo solo che un id deve contenere almeno un carattere e non può contenere spazi.

L'attributo id fa distinzione tra maiuscole e minuscole in XHTML .

Come questione puramente pratica, potresti voler evitare determinati personaggi. Periodi, due punti e '#' hanno un significato speciale nei selettori CSS, quindi dovrai sfuggire a quei caratteri usando una barra rovesciata in CSS o una barra rovesciata doppia in una stringa di selezione passata a jQuery . Pensa a quanto spesso dovrai sfuggire a un personaggio nei tuoi fogli di stile o nel tuo codice prima di impazzire con punti e due punti in ID.

Ad esempio, la dichiarazione HTML <div id="first.name"></div>è valida. Puoi selezionare quell'elemento nei CSS come #first\.namee in jQuery in questo modo: $('#first\\.name').Ma se dimentichi la barra rovesciata, $('#first.name')avrai un selettore perfettamente valido che cerca un elemento con id firste che ha anche classe name. Questo è un bug che è facile da trascurare. A lungo termine potresti essere più felice scegliendo l'id first-name(un trattino anziché un punto).

È possibile semplificare le attività di sviluppo attenendosi rigorosamente a una convenzione di denominazione. Ad esempio, se ti limiti interamente ai caratteri minuscoli e separi sempre le parole con trattini o caratteri di sottolineatura (ma non entrambi, scegli uno e non usare mai l'altro), allora hai un modello facile da ricordare. Non ti chiederai mai "era firstNameo FirstName?" perché saprai sempre che dovresti digitare first_name. Preferisci la custodia per cammelli? Quindi limitati a questo, senza trattini o caratteri di sottolineatura, e usa sempre, sia maiuscolo che minuscolo per il primo personaggio, non mescolarli.

Un problema ora molto oscuro era che almeno un browser, Netscape 6, trattava erroneamente i valori degli attributi id come case sensitive . Ciò significa che se avessi digitato il id="firstName"tuo HTML (minuscola 'f') e il #FirstName { color: red }tuo CSS (maiuscola 'F'), quel browser buggy non sarebbe riuscito a impostare il colore dell'elemento su rosso. Al momento di questa modifica, aprile 2015, spero che non ti venga chiesto di supportare Netscape 6. Considera questa una nota storica.

Dalla specifica HTML 4 :

I token ID e NAME devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da un numero qualsiasi di lettere, cifre ([0-9]), trattini ("-"), caratteri di sottolineatura ("_") , due punti (":") e punti (".").

Un errore comune è utilizzare un ID che inizia con una cifra.

È possibile utilizzare tecnicamente due punti e punti negli attributi id / name, ma suggerirei vivamente di evitare entrambi.

Nei CSS (e in diverse librerie JavaScript come jQuery), sia il punto che i due punti hanno un significato speciale e incontrerai problemi se non stai attento. I periodi sono selettori di classe e i due punti sono pseudo-selettori (ad esempio, ": hover" per un elemento quando il mouse è sopra di esso).

Se dai a un elemento l'id "my.cool:thing", il tuo selettore CSS sarà simile al seguente:

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

Il che sta veramente dicendo "l'elemento con un id di" mio ", una classe di" cool "e lo pseudo-selettore" cosa "in CSS.

Attenersi alla AZ di qualsiasi caso, numeri, trattini bassi e trattini. E come detto sopra, assicurati che i tuoi ID siano unici.

Questa dovrebbe essere la tua prima preoccupazione.

jQuery fa gestire qualsiasi nome di documento d'identità valido. Hai solo bisogno di sfuggire ai metacaratteri (cioè punti, punti e virgola, parentesi quadre ...). È come dire che JavaScript ha un problema con le virgolette solo perché non puoi scrivere

var name = 'O'Hara';

Selettori nell'API jQuery (vedi nota in basso)

Dovrebbe corrispondere rigorosamente

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

Ma jquery sembra avere problemi con i due punti, quindi potrebbe essere meglio evitarli.

HTML5:

elimina le restrizioni aggiuntive sull'attributo id vedi qui . Gli unici requisiti rimasti (oltre ad essere univoci nel documento) sono:

1. il valore deve contenere almeno un carattere (non può essere vuoto)
2. non può contenere caratteri spaziali.

PRE-HTML5:

L'ID deve corrispondere:

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

1. Deve iniziare con caratteri AZ o az
2. Può contenere -(trattino), _(trattino basso), :(due punti) e .(punto)

ma si dovrebbe evitare :e .perché:

Ad esempio, un ID potrebbe essere etichettato "ab: c" e referenziato nel foglio di stile come #ab: c ma oltre ad essere l'id per l'elemento, potrebbe significare id "a", classe "b", pseudo- selettore "c". Meglio evitare la confusione e stare lontano dall'uso. e: complessivamente.

HTML5: valori consentiti per attributi ID e classe

A partire da HTML5, le uniche restrizioni sul valore di un ID sono:

1. deve essere unico nel documento
2. non deve contenere alcuno spazio
3. deve contenere almeno un carattere

Regole simili si applicano alle classi (ad eccezione dell'unicità, ovviamente).

Quindi il valore può essere composto da tutte le cifre, solo una cifra, solo caratteri di punteggiatura, inclusi caratteri speciali, qualunque cosa. Solo nessuno spazio bianco. Questo è molto diverso da HTML4.

In HTML 4, i valori ID devono iniziare con una lettera, che può essere seguita solo da lettere, cifre, trattini, caratteri di sottolineatura, due punti e punti.

In HTML5 sono validi:

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

Basta tenere presente che l'uso di numeri, punteggiatura o caratteri speciali nel valore di un ID può causare problemi in altri contesti (ad es. CSS, JavaScript, regex).

Ad esempio, il seguente ID è valido in HTML5:

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

Tuttavia, non è valido nei CSS:

Dalle specifiche CSS2.1:

4.1.3 Personaggi e caso

Nel CSS, gli identificatori (inclusi nomi di elementi, classi e ID nei selettori) possono contenere solo i caratteri [a-zA-Z0-9] e ISO 10646 caratteri U + 00A0 e versioni successive, oltre il trattino (-) e il trattino basso ( _); non possono iniziare con una cifra, due trattini o un trattino seguito da una cifra .

Nella maggior parte dei casi potresti essere in grado di sfuggire ai personaggi in contesti in cui hanno restrizioni o significati speciali.

Riferimenti W3C

HTML5

3.2.5.1 L' id attributo

L' idattributo specifica l'identificatore univoco (ID) del suo elemento.

Il valore deve essere univoco tra tutti gli ID nella sottostruttura principale dell'elemento e deve contenere almeno un carattere. Il valore non deve contenere alcuno spazio.

Nota: non ci sono altre restrizioni su quale forma può assumere un ID; in particolare, gli ID possono consistere di sole cifre, iniziare con una cifra, iniziare con un carattere di sottolineatura, consistere solo di punteggiatura, ecc.

3.2.5.7 L' class attributo

L'attributo, se specificato, deve avere un valore che è un insieme di token separati da spazio che rappresentano le varie classi a cui appartiene l'elemento.

Le classi che gli sono state assegnate da un elemento HTML sono costituite da tutte le classi restituite quando il valore dell'attributo class viene suddiviso in spazi. (I duplicati vengono ignorati.)

Non ci sono restrizioni aggiuntive sui token che gli autori possono usare nell'attributo class, ma gli autori sono incoraggiati a usare valori che descrivono la natura del contenuto, piuttosto che valori che descrivono la presentazione desiderata del contenuto.

In pratica molti siti usano idattributi che iniziano con i numeri, anche se tecnicamente questo non è un HTML valido.

La specifica di bozza HTML 5 allenta le regole per gli attributi ide name: ora sono solo stringhe opache che non possono contenere spazi.

Trattini, trattini bassi, punti, due punti, numeri e lettere sono tutti validi per l'uso con CSS e JQuery. Quanto segue dovrebbe funzionare ma deve essere univoco in tutta la pagina e deve anche iniziare con una lettera [A-Za-z].

Lavorare con due punti e punti richiede un po 'più di lavoro, ma puoi farlo come mostra il seguente esempio.

<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

Tenendo presente che l'ID deve essere univoco, ad es. non devono esserci più elementi in un documento con lo stesso valore ID.

Le regole sul contenuto ID in HTML5 sono (oltre ad essere univoche):

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.

Questa è la specifica W3 sull'ID (da 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).

Ulteriori informazioni:

• W3 - attributi globali (id)
• MDN atribute (id)

Per fare riferimento a un ID con un punto in esso è necessario utilizzare una barra rovesciata. Non sono sicuro che sia lo stesso per trattini o caratteri di sottolineatura. Ad esempio: HTML

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

CSS

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

Dalle specifiche HTML 4 ...

I token ID e NAME devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da un numero qualsiasi di lettere, cifre ([0-9]), trattini ("-"), caratteri di sottolineatura ("_") , due punti (":") e punti (".").

EDIT: d'oh! Picchiato di nuovo sul pulsante!

Inoltre, non dimenticare mai che un ID è unico. Una volta utilizzato, il valore ID potrebbe non essere più visualizzato in nessun punto del documento.

Potresti avere molti ID, ma tutti devono avere un valore univoco.

D'altra parte, c'è l'elemento class. Proprio come ID, può apparire più volte, ma il valore può essere utilizzato più volte.

Un identificatore univoco per l'elemento.

Non ci devono essere più elementi in un documento con lo stesso valore ID.

Qualsiasi stringa, con le seguenti restrizioni:

1. deve essere lungo almeno un personaggio

2. non deve contenere caratteri di spazio:

   • U + 0020 SPACE
   • U + 0009 TABULAZIONE CARATTERI (scheda)
   • U + 000A LINE FEED (LF)
   • U + 000C FORM FEED (FF)
   • U + 000D RITORNO DEL CARRELLO (CR)

L'uso dei caratteri tranne ASCII letters and digits, '_', '-' and '.'può causare problemi di compatibilità, in quanto non consentiti HTML 4. Sebbene questa limitazione sia stata revocata HTML 5, un ID dovrebbe iniziare con una lettera per la compatibilità.

Sembra che sebbene i due punti (:) e i punti (.) Siano validi nelle specifiche HTML, non sono validi come selettori ID nel CSS, quindi probabilmente è meglio evitarli se si intende utilizzarli a tale scopo.

per HTML5

Il valore deve essere univoco tra tutti gli ID nella sottostruttura principale dell'elemento e deve contenere almeno un carattere. Il valore non deve contenere alcuno spazio.

Almeno un personaggio, nessuno spazio.

Questo apre le porte a casi d'uso validi come l'uso di caratteri accentati. Ci dà anche molte più munizioni per spararci ai piedi, poiché ora puoi usare valori ID che causeranno problemi con CSS e JavaScript a meno che tu non sia davvero attento.

1. Gli ID sono più adatti per la denominazione di parti del layout, quindi non devono dare lo stesso nome per ID e classe
2. ID consente caratteri alfanumerici e speciali
3. ma evitare l'uso di # : . * !simboli
4. spazi non ammessi
5. non iniziato con numeri o un trattino seguito da una cifra
6. che tiene conto del maiuscolo o minuscolo
7. l'utilizzo dei selettori ID è più rapido dell'utilizzo dei selettori di classe
8. usa il trattino "-" (il carattere di sottolineatura "_" può anche usare ma non va bene per seo) per nomi CSS lunghi di classi Id o
9. Se una regola ha un selettore ID come selettore chiave, non aggiungere il nome del tag alla regola. Poiché gli ID sono univoci, l'aggiunta di un nome tag rallenterebbe inutilmente il processo di corrispondenza.
10. In HTML5, l'attributo id può essere utilizzato su qualsiasi elemento HTML e in HTML 4.01, l'attributo id non può essere utilizzato con: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Qualsiasi valore alfanumerico e " - " e " _ " è valido. Tuttavia, dovresti iniziare il nome ID con qualsiasi carattere tra AZ o az .

Nessuno spazio, deve iniziare con almeno un carattere dalla a alla z e da 0 a 9.

In HTML

L'ID dovrebbe iniziare con {AZ} o {az} è possibile aggiungere cifre, punto, trattino, trattino basso, due punti.

Per esempio:

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

Ma anche se puoi creare un ID con due punti (:) o punto (.) È difficile per i CSS utilizzare questi ID come selettore. Principalmente quando si desidera utilizzare gli pseudo elementi (: before,: after).

Anche in JS è difficile selezionare questi ID. Quindi dovresti usare i primi quattro ID Come preferito da molti sviluppatori in giro e se è necessario di quanto puoi usare anche gli ultimi due.

i valori possono essere: [az], [AZ], [0-9], [* _: -]

è usato per HTML5 ...

possiamo aggiungere id con qualsiasi tag.

Dal momento che ES2015 possiamo anche usare quasi tutti i caratteri unicode per gli ID, se il set di documenti è impostato su UTF8.

Prova qui: https://mothereff.in/js-variables

Leggi: https://mathiasbynens.be/notes/javascript-identifiers-es6

In ES2015, gli identificatori devono iniziare con $, _ o qualsiasi simbolo con la proprietà principale derivata Unicode ID_Start.

Il resto dell'identificatore può contenere $, _, U + 200C non-joiner di larghezza zero, U + 200D zero-joiner di larghezza zero o qualsiasi simbolo con la proprietà core derivata Unicode ID_Continua.

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̙̙̔̄͜">

Dovresti usarlo? Probabilmente non una buona idea!

Leggi: https://stackoverflow.com/a/52799593/2494754

alfabeti-> maiuscole e minuscole-
> 0-9 caratteri
speciali-> ':', '-', '_', '.'

il formato dovrebbe essere a partire da "." o un alfabeto, seguito da uno dei caratteri speciali di più alfabeti o numeri. il valore del campo ID non deve terminare con un '_'.
Inoltre, gli spazi non sono ammessi, se forniti, vengono trattati come valori diversi, il che non è valido nel caso degli attributi id.