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


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


1707
2017-09-16 09:08


origine


risposte:


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 alcun carattere spaziale.

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 a quei personaggi usando a backslash in CSS o un doppio backslash in a stringa del 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> è valido. Puoi selezionare quell'elemento in CSS come #first\.name e in jQuery in questo modo: $('#first\\.name'). Ma se dimentichi il backslash, $('#first.name'), avrai un selettore perfettamente valido alla ricerca di un elemento con id first e anche avendo 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), invece.

È 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 "è stato firstName o FirstName? "perché saprai sempre che dovresti 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 era che almeno un browser, Netscape 6, valori di attributo id erroneamente trattati come maiuscole e minuscole. Ciò significava che se tu avessi 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.


1487
2017-09-17 01:42



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


194
2017-09-16 09:09



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

Nei CSS (e in molte librerie JavaScript come jQuery), sia il punto 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 esempio ": 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 "cosa" 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.


130
2017-09-16 14:01



jQuery fa gestire qualsiasi nome ID valido. Hai solo bisogno di scappare dai 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 API jQuery (vedi nota in basso)


60
2018-01-10 20:40



Strettamente dovrebbe coincidere

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

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


51
2017-09-16 09:11



HTML5:

sbarazzarsi delle ulteriori restrizioni sull'attributo id Vedere qui. Gli unici requisiti rimasti (oltre ad 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. Potrebbe contenere - (trattino), _ (sottolineare), : (due punti) e . (periodo)

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.


39
2018-01-18 07:09



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 caratteri spaziali
  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, caratteri di sottolineatura, due 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'utilizzo 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 Personaggi e caso

In CSS, identificatori (compresi nomi di elementi, classi e ID in   selettori) può contenere solo i caratteri [a-zA-Z0-9] e ISO 10646   caratteri U + 00A0 e successivi, più 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 significato speciale.


Riferimenti W3C

HTML5

3.2.5.1 id   attributo

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

Il valore deve essere unico tra tutti gli ID nella casa dell'elemento   sottostrato e deve contenere almeno un carattere. Il valore non deve   contenere eventuali caratteri spaziali.

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

3.2.5.7 class   attributo

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

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

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


33
2017-08-02 15:53



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

Il Specifica di bozza HTML 5 allenta le regole per il id e name attributi: ora sono solo stringhe opache che non possono contenere spazi.


28
2017-09-16 10:04



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>

25
2017-07-07 10:09



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 about 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 un tributo (id)

18
2017-08-26 21:54