Jakie są prawidłowe wartości atrybutu id w HTML?

From the HTML 4 specification :

Tokeny ID i NAME muszą zaczynać się od litery ([a-Za-z]) i mogą być poprzedzone dowolną liczbą liter, cyfr ([0-9]), myślników ("-"), podkreślników ("_"), dwukropków ( " :") i kropek (".").

Częstym błędem jest użycie identyfikatora zaczynającego się od cyfry.

Technicznie można używać dwukropków i kropek w atrybutach id/name, ale zdecydowanie sugerowałbym unikanie obu.

W CSS (i kilku bibliotekach JavaScript, takich jak jQuery), zarówno kropka, jak i dwukropek mają specjalne znaczenie i napotkasz problemy, jeśli nie będziesz ostrożny. Okresy są selektorami klas, a dwukropki pseudo-selektorami (np., ": hover " dla elementu, gdy mysz jest nad nim).

Jeśli nadasz elementowi id " my.cool: thing", Twój selektor CSS będzie wyglądał jak to:

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

Co naprawdę mówi: "element o id 'my', Klasa ' cool 'i pseudo-selektor' thing '" w CSS-speak.

Trzymaj się od A do z każdego przypadku, cyfr, podkreślników i myślników. I jak wspomniano powyżej, upewnij się, że Twoje identyfikatory są unikalne.

JQuery obsługuje dowolną poprawną nazwę ID. Wystarczy uciec metacharakterów (tj. kropki, średniki, nawiasy kwadratowe...). To tak, jakby powiedzieć, że JavaScript ma problem z cudzysłowami tylko dlatego, że nie możesz napisać

var name = 'O'Hara';

Selektory w jQuery API (patrz dolna Uwaga)

Ściśle powinien pasować

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

Ale jquery wydaje się mieć problemy z dwukropkami, więc może lepiej ich unikać.

HTML5:

Pozbywa się dodatkowych ograniczeń atrybutu id patrz tutaj . Pozostałe wymagania (poza tym, że są unikalne w dokumencie) to:

1. wartość musi zawierać co najmniej jeden znak (nie może być pusty)
2. nie może zawierać znaków spacji.

PRE-HTML5:

ID powinno pasować:

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

1. musi zaczynać się od znaków A-Z LUB a-z
2. może zawierać - (myślnik), _ (podkreślenie), : (dwukropek) i . (kropka)

Ale należy unikać : i . beacause:

Na przykład, ID może być oznaczone jako" a.b:c "i odwoływane w arkuszu stylów jako #A. b: C, ale oprócz tego, że jest id dla elementu, może oznaczać id "a", klasę" b", pseudo-selektor"c". Najlepiej uniknąć zamieszania i trzymać się z dala od używania . / align = "left" /

HTML5: dozwolone wartości dla atrybutów ID i Klasy

1. musi być unikalny w dokumencie
2. nie może zawierać znaków spacji
3. musi zawierać co najmniej jeden znak

Podobne zasady dotyczą klas (z wyjątkiem wyjątkowości, oczywiście).

Więc wartość może być wszystkie cyfry, tylko jedna cyfra, tylko znaki interpunkcyjne, zawierać znaki specjalne, cokolwiek. Just brak spacji. To bardzo różni się od HTML4.

W HTML 4 wartości ID muszą zaczynać się od litery, po której mogą następować tylko litery, cyfry, myślniki, podkreślniki, dwukropki i kropki.

W HTML5 są ważne:

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

Należy pamiętać, że używanie liczb, znaków interpunkcyjnych lub znaków specjalnych w wartości identyfikatora może powodować problemy w innych kontekstach (np. CSS, JavaScript, regex).

Na przykład poniższy identyfikator jest ważny w HTML5:

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

jednak w CSS jest nieprawidłowy:

Z CSS2. 1 spec:

4.1.3 znaki i etui

W CSS, identyfikatory (w tym nazwy elementów, klasy i identyfikatory w selektory) mogą zawierać tylko znaki [a-zA-Z0-9] i ISO 10646 znaki U + 00A0 i wyższe, Plus myślnik ( - ) i podkreślenie (_); nie mogą zaczynać się od cyfry, dwóch myślników lub myślnika followed przez cyfrę.

W większości przypadków możesz być w stanie uniknąć znaków w kontekstach, w których mają ograniczenia lub specjalne znaczenie.

Referencje W3C

HTML5

3.2.5.1 the id atrybut

Atrybut id określa unikalny identyfikator swojego elementu (ID).

Wartość musi być unikalna wśród wszystkich identyfikatorów w domu elementu subtree i musi zawierać co najmniej jeden charakter. Wartość nie może zawiera dowolne znaki spacji.

UWAGA: nie ma innych ograniczeń co do tego, jaką formę może przybrać identyfikator; w szczególne, identyfikatory mogą składać się tylko z cyfr, rozpoczynają się cyfrą, rozpoczynają z podkreśleniem, składają się tylko z interpunkcji itp.

3.2.5.7 the class atrybut

Atrybut, jeśli jest określony, musi mieć wartość będącą zbiorem oddzielone spacjami tokeny reprezentujące różne klasy, które element należy do.

Klasy przypisane do elementu HTML składają się ze wszystkich klasy zwracane, gdy wartość atrybutu class jest podzielona na miejsca. (Duplikaty są ignorowane.)

Nie ma dodatkowych ograniczeń na tokeny, których autorzy mogą używać w atrybutu klasy, ale autorzy są zachęcani do używania wartości, które opisać charakter treści, a nie wartości, które opisują pożądaną prezentację treści.

W praktyce wiele stron używa atrybutów {[0] } zaczynających się od liczb, mimo że technicznie nie jest to poprawny HTML.

Specyfikacja HTML 5 draft rozluźnia reguły atrybutów id i name: są one teraz tylko nieprzezroczystymi łańcuchami, które nie mogą zawierać spacji.

Myślniki, podkreślniki, kropki, dwukropki, cyfry i litery są ważne do użytku z CSS i JQuery. Poniższe informacje powinny działać, ale muszą być unikalne na całej stronie, a także muszą zaczynać się od litery [A-Za-z].

Praca z dwukropkami i kropkami wymaga nieco więcej pracy, ale możesz to zrobić, jak pokazuje poniższy przykład.

<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

Pamiętając, że ID musi być unikalne, tj. w dokumencie nie może znajdować się wiele elementów o tej samej wartości id.

Zasady dotyczące zawartości ID w HTML5 są (poza tym, że są unikalne):

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.

To jest W3 spec o ID (från 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).

Więcej informacji:

• W3 - atrybuty globalne(id)
• MDN atribute (id)

Aby odwołać się do identyfikatora z kropką, musisz użyć odwrotnego ukośnika. Nie wiem, czy to samo dla myślników lub podkreślników. Na przykład: HTML

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

CSS

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

Z HTML 4 spec...

Tokeny ID i NAME muszą zaczynać się od litery ([a-Za-z]) i mogą być poprzedzone dowolną liczbą liter, cyfr ([0-9]), myślników ("-"), podkreślników ("_"), dwukropków ( " :") i kropek (".").

EDIT: d Pobity do guzika, znowu!

Również, nigdy nie zapominaj, że identyfikator jest unikalny. Po użyciu wartość ID może nie pojawić się ponownie w dowolnym miejscu dokumentu.

Możesz mieć wiele identyfikatorów, ale wszystkie muszą mieć unikalną wartość.

Z drugiej strony istnieje element klasy. Podobnie jak ID, może pojawić się wiele razy, ale wartość może być używana w kółko.

Wydaje się, że chociaż dwukropki (:) i kropki (.) są poprawne w specyfikacji HTML, są nieprawidłowe jako selektory id w CSS , więc prawdopodobnie najlepiej unikać, jeśli zamierzasz ich używać do tego celu.

Dla HTML5

Wartość musi być unikalna wśród wszystkich identyfikatorów w domu elementu subtree i musi zawierać co najmniej jeden znak. Wartość nie może zawiera dowolne znaki spacji.

Przynajmniej jeden znak, bez spacji.

Otwiera to drzwi dla ważnych przypadków użycia, takich jak używanie znaków akcentowanych. Daje nam również dużo więcej amunicji do strzelania sobie w stopę, ponieważ możesz teraz używać wartości id, które będą powodować problemy zarówno z CSS, jak i JavaScript, chyba że jesteś bardzo ostrożny.

Niepowtarzalny identyfikator elementu.

W dokumencie nie może znajdować się wiele elementów o tej samej wartości id.

Dowolny ciąg znaków, z następującymi ograniczeniami:

1. musi mieć długość co najmniej jednego znaku

2. Nie może zawierać znaków spacji:

   • PRZESTRZEŃ U+0020
   • U+0009 tabulacja znaków (tab)
   • U+000A LINE FEED (LF)
   • U+000C FORM FEED (FF)
   • U+000D (CR)

Używanie znaków z wyjątkiem ASCII letters and digits, '_', '-' and '.' może powodować problemy ze zgodnością, ponieważ nie były one dozwolone w HTML 4. Chociaż to ograniczenie zostało zniesione w HTML 5, identyfikator powinien zaczynać się od litery dla zgodności.

1. identyfikatory najlepiej nadają się do nazywania części układu, więc nie powinny podawać tej samej nazwy dla ID i klasy
2. ID pozwala na znaki alfanumeryczne i specjalne
3. ale unikaj używania # : . * ! symboli
4. niedozwolone spacje
5. nie rozpoczynane cyframi lub myślnikiem, po którym następuje cyfra
6. rozróżnianie wielkości liter
7. używanie selektorów ID jest szybsze niż używanie selektorów klas
8. Użyj myślnika " - "(podkreślenie " _ " może również używać, ale nie jest dobre dla seo) dla długiej klasy CSS lub Id nazwy reguł
9. jeśli reguła ma selektor ID jako kluczowy selektor, nie dodawaj nazwy tagu do reguły. Ponieważ identyfikatory są unikalne, dodanie nazwy znacznika niepotrzebnie spowolni proces dopasowywania.
10. w HTML5 atrybut id może być używany na dowolnym elemencie HTML, a w HTML 4.01 atrybut id nie może być używany z: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Dowolna Wartość alfanumeryczna oraz "-" oraz "_" jest ważne. Należy jednak zacząć nazwę id od dowolnego znaku pomiędzy A-zlub a-z.

Brak spacji, musi zaczynać się przynajmniej znakiem od a do Z i od 0 do 9.

Alfabety - > caps & small
cyfry - > 0-9
znaki specjalne-> ':', '-', '_', '.'

Format powinien zaczynać się od"."lub alfabetu, po którym następuje jeden ze znaków specjalnych większej liczby alfabetów lub cyfr. wartość pola id nie może kończyć się znakiem'_'.
również spacje nie są dozwolone, jeśli są podane, są traktowane jako różne wartości, co nie jest ważne w przypadku atrybutów id.

W HTML5 identyfikator nie może zaczynać się od liczby, np. id-"1kid" i nie może mieć spacji (id="Some kind")