it-swarm.it

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

Quando si creano gli attributi id per gli elementi HTML, quali regole ci sono per il valore?

1854
Mr Shark

Per HTML 4 , la risposta è tecnicamente:

I token ID e NAME devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da qualsiasi numero di lettere, cifre ([0-9]), trattini ("-"), trattini bassi ("_") , 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 è case sensitive in XHTML .

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

Ad esempio, la dichiarazione HTML <div id="first.name"></div> è valida. Puoi selezionare quell'elemento nei CSS come #first\.name e in jQuery in questo modo: $('#first\\.name'). Ma se dimentichi la barra rovesciata, $('#first.name'), avrai un selettore perfettamente valido alla ricerca di un elemento con id first e anche avente classe name. Questo è un bug che è facile trascurare. Potresti essere più felice nel lungo periodo scegliendo l'id first-name (un trattino piuttosto che un punto).

È possibile semplificare le attività di sviluppo attenendosi rigorosamente a una convenzione di denominazione. Ad esempio, se ti limiti completamente ai caratteri minuscoli e separi sempre le parole con trattini o caratteri di sottolineatura (ma non entrambi, scegli uno e non usi mai l'altro), allora hai un modello facile da ricordare. Non ti chiederai mai "era firstName o FirstName?" perché saprai sempre che devi digitare first_name. Preferisci il caso dei cammelli? Quindi limitati a questo, senza trattini o caratteri di sottolineatura e, sempre, usa sempre maiuscole o minuscole per il primo carattere, non mescolarle.


Un problema ora molto oscuro è che almeno un browser, Netscape 6, ha erroneamente interpretato valori di attributo id come case-sensitive . Ciò significava che se avevi digitato id="firstName" nel tuo HTML (minuscolo 'f') e #FirstName { color: red } nel tuo CSS (maiuscolo 'F'), quel browser bacato non sarebbe riuscito a impostare il colore dell'elemento in rosso. Al momento di questa modifica, aprile 2015, spero che non ti venga chiesto di supportare Netscape 6. Considera questa una nota storica.

1584
dgvid

Dalla specifica HTML 4 :

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

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

211
Peter Hilton

Puoi tecnicamente utilizzare due punti e punti negli attributi id/name, ma ti suggerisco caldamente di evitare entrambi.

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

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

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

Il che in realtà dice "l'elemento con un id di" mio ", una classe di" fico "e lo" pseudo-selettore "di cose" in linguaggio CSS.

Attenersi ad A-Z di ogni caso, numeri, trattini bassi e trattini. E come detto sopra, assicurati che i tuoi ID siano unici.

Questa dovrebbe essere la tua prima preoccupazione.

145
Michael Thompson

jQuery does gestisce qualsiasi nome ID valido. Hai solo bisogno di sfuggire ai metacaratteri (cioè punti, punto e virgola, parentesi quadre ...). È come dire che JavaScript ha un problema con le virgolette solo perché non puoi scrivere

var name = 'O'Hara';

Selettori in jQuery API (vedi nota di fondo)

63

Strettamente dovrebbe coincidere

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

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

60
Mr Shark

HTML5:

sbarazzarsi delle ulteriori restrizioni sull'attributo id vedi qui . Gli unici requisiti rimasti (oltre a essere unici 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 A-Z o a-z
  2. Può contenere - (trattino), _ (trattino basso), : (due punti) e . (punto)

ma si dovrebbe evitare : e . beacause:

Ad esempio, un ID potrebbe essere etichettato come "ab: c" e fatto riferimento 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.

52
Zaheer Ahmed

HTML5: valori consentiti per ID e attributi di classe

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

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

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

Quindi il valore può essere tutte cifre, solo una cifra, solo caratteri di punteggiatura, includere caratteri speciali, qualunque sia. 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, trattini bassi, punti e punti.

In HTML5 questi 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>

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

Ad esempio, il seguente ID è valido in HTML5:

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

Tuttavia, non è valido nei CSS:

Dalla specifica CSS2.1:

4.1.3 Caratteri e caso

Nei CSS, identificatori (compresi i nomi degli elementi, le classi e gli ID nei selettori) possono contenere solo i caratteri [a-zA-Z0-9] e ISO 10646 caratteri U + 00A0 e superiori, più il trattino ( -) e il carattere di sottolineatura (_);non possono iniziare con una cifra, due trattini o un trattino seguito da una cifra.

Nella maggior parte dei casi potresti riuscire a sfuggire ai personaggi in contesti in cui hanno restrizioni o significato speciale.


Riferimenti W3C

HTML5

3.2.5.1 L'attributo id

L'attributo id specifica l'identificatore univoco (ID) dell'elemento.

Il valore deve essere univoco tra tutti gli ID nella sottostruttura home dell'elemento e deve contenere almeno un carattere. Il valore non deve contenere spazi vuoti.

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

3.2.5.7 L'attributo class

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

Le classi a cui è stato assegnato un elemento HTML sono costituite da tutte le classi restituite quando il valore dell'attributo class viene diviso in spazi. (I duplicati sono ignorati.)

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

47
Michael_B

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

Il HTML 5 draft specification allenta le regole per gli attributi id e name: ora sono solo stringhe opache che non possono contenere spazi.

32
pdc

I trattini, i caratteri di sottolineatura, i punti, i due punti, i numeri e le lettere sono tutti validi per l'uso con CSS e JQuery. Il seguente dovrebbe funzionare ma deve essere unico in tutta la pagina e deve anche iniziare con una lettera [A-Za-z].

Lavorare con i due punti e i periodi 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>
29
blacksun1

HTML5

Tenendo presente che l'ID deve essere unico, es. non ci devono essere più elementi in un documento che hanno lo stesso valore id.

Le regole sul contenuto ID in HTML5 sono (a parte l'unicità):

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.

Questo è il W3 spec 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)
23
Sergio

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

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

CSS

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

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

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

D'altra parte, c'è l'elemento di classe. Proprio come l'ID, può apparire molte volte, ma il valore può essere usato più e più volte.

14
Vordreller

Dalla specifica HTML 4 ...

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

EDIT: d'oh! Picchiato al bottone, ancora!

14
Steve Morgan

Un identificativo univoco per l'elemento.

Non ci devono essere più elementi in un documento che hanno lo stesso valore id.

Qualsiasi stringa, con le seguenti restrizioni:

  1. deve essere lungo almeno un carattere
  2. non deve contenere caratteri spaziali:

    • U + 0020 SPAZIO
    • U + 0009 TABULAZIONE CARATTERI (scheda)
    • U + 000A LINE FEED (LF)
    • U + 000C FORM FEED (FF)
    • U + 000D CARRIAGE RETURN (CR)

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

11
Bhavin Solanki

Sembra che sebbene i due punti (:) e punti (.) Siano validi nelle specifiche HTML, non sono validi come selettori di id in CSS , quindi è meglio evitarlo se si intende usarli a tale scopo.

9
lstg

per HTML5

Il valore deve essere univoco tra tutti gli ID nella sottostruttura home dell'elemento e deve contenere almeno un carattere. Il valore non deve contenere spazi vuoti.

Almeno un personaggio, nessuno spazio.

Ciò apre la porta a casi d'uso validi come l'utilizzo di caratteri accentati. Ci dà anche un sacco di più munizioni per spararci al piede con, dal momento che ora puoi usare valori di id che causeranno problemi sia con i CSS che con JavaScript, a meno che tu non sia molto attento.

Qualsiasi Valore alfanumerico e " - " e " _ " è valido. Ma, dovresti avviare il nome id con qualsiasi carattere tra A-Z o a-z .

7
Tazwar Utshas
  1. Gli ID sono più adatti per nominare parti del tuo layout, quindi non dovrebbero dare lo stesso nome per ID e classe
  2. L'ID consente di caratteri alfanumerici e speciali
  3. ma evitare l'uso di simboli # : . * !
  4. spazi non consentiti
  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 rispetto all'utilizzo dei selettori di classe
  8. usa il trattino "-" (il carattere di sottolineatura "_" può anche usare ma non va bene per seo) per la lunga classe CSS o nomi di regole di identificazione
  9. Se una regola ha un selettore ID come selettore di chiave, non aggiungere il nome del tag alla regola. Poiché gli ID sono unici, l'aggiunta di un nome di tag rallenterebbe inutilmente il processo di abbinamento.
  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>.

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

5
Wembo Mulumba