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

idJakie reguły obowiązują przy tworzeniu atrybutów dla elementów HTML?

W przypadku HTML 4 technicznie odpowiedź brzmi:

Tokeny ID i NAZWA muszą zaczynać się od litery ([A-Za-z]), po której może następować dowolna liczba liter, cyfr ([0-9]), łączników („-”), podkreślników („_”) , dwukropki („:”) i kropki („.”).

HTML 5 jest jeszcze bardziej liberalny, mówiąc tylko, że identyfikator musi zawierać co najmniej jeden znak i nie może zawierać znaków spacji.

W atrybucie id rozróżniana jest wielkość liter w XHTML .

Ze względów czysto praktycznych możesz unikać pewnych postaci. Kropki, dwukropki i „#” mają specjalne znaczenie w selektorach CSS, więc będziesz musiał uciec od tych znaków za pomocą odwrotnego ukośnika w CSS lub podwójnego odwrotnego ukośnika w ciągu selektora przekazanym do jQuery . Zastanów się, jak często będziesz musiał uciekać przed postacią z arkuszy stylów lub kodu, zanim oszalejesz z kropkami i dwukropkami w identyfikatorach.

Na przykład deklaracja HTML <div id="first.name"></div>jest ważna. Możesz wybrać ten element w CSS jako #first\.namei w jQuery w następujący sposób: $('#first\\.name').Ale jeśli zapomnisz odwrotnego ukośnika, $('#first.name')będziesz miał doskonale poprawny selektor szukający elementu o identyfikatorze, firsta także posiadający klasę name. Jest to błąd, który łatwo przeoczyć. Na dłuższą metę możesz być szczęśliwszy, wybierając first-namezamiast identyfikatora (łącznik zamiast kropki).

Możesz uprościć zadania programistyczne, ściśle przestrzegając konwencji nazewnictwa. Na przykład, jeśli ograniczysz się całkowicie do małych liter i zawsze oddzielasz słowa myślnikami lub podkreślnikami (ale nie oba, wybierz jedno i nigdy nie używaj drugiego), to masz łatwy do zapamiętania wzór. Nigdy nie będziesz się zastanawiać „ firstNameczy to było FirstName?” ponieważ zawsze będziesz wiedział, że powinieneś pisać first_name. Wolisz futerał na wielbłądy? Zatem ogranicz się do tego, bez myślników ani podkreślników i zawsze konsekwentnie używaj wielkich lub małych liter dla pierwszej postaci, nie mieszaj ich.

Bardzo niejasnym problemem było to, że co najmniej jedna przeglądarka, Netscape 6, nieprawidłowo traktowała wartości atrybutów id jako rozróżniające wielkość liter . Oznaczało to, że gdybyś wpisał id="firstName"swój HTML (małe litery „f”) i #FirstName { color: red }CSS (wielkie litery „F”), ta błędna przeglądarka nie ustawiłaby koloru elementu na czerwony. Mam nadzieję, że w momencie tej edycji, kwiecień 2015 r., Nie zostaniesz poproszony o wsparcie Netscape 6. Rozważ to jako historyczny przypis.

Ze specyfikacji HTML 4 :

Tokeny ID i NAZWA muszą zaczynać się od litery ([A-Za-z]), po której może następować dowolna liczba liter, cyfr ([0-9]), łączników („-”), podkreślników („_”) , dwukropki („:”) i kropki („.”).

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

Możesz technicznie używać dwukropków i kropek w atrybutach id / name, ale zdecydowanie sugeruję unikanie obu.

W CSS (i kilku bibliotekach JavaScript, takich jak jQuery) zarówno kropka, jak i dwukropek mają specjalne znaczenie i jeśli nie będziesz ostrożny, napotkasz problemy. Okresy to selektory klas, a dwukropki to pseudoselektory (np. „: Hover” dla elementu, gdy wskaźnik myszy znajduje się nad nim).

Jeśli podasz elementowi identyfikator „my.cool:thing”, twój selektor CSS będzie wyglądał następująco:

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

Co tak naprawdę mówi: „element z identyfikatorem„ my ”, klasa„ cool ”i pseudo-selektor„ rzecz ”w CSS-speak.

Trzymaj się AZ każdego przypadku, liczb, podkreślników i łączników. I jak powiedziano powyżej, upewnij się, że twoje identyfikatory są unikalne.

To powinna być twoja pierwsza troska.

jQuery ma obsługiwać dowolną poprawną nazwę ID. Musisz tylko unikać metaznaków (tj. Kropek, średników, nawiasów kwadratowych ...). To tak, jakby powiedzieć, że JavaScript ma problem z cytatami tylko dlatego, że nie możesz pisać

var name = 'O'Hara';

Selektory w jQuery API (patrz dolna uwaga)

Ściśle powinno to pasować

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

Ale jquery wydaje się mieć problemy z okrężnicami, więc lepiej byłoby ich unikać.

HTML5:

pozbywa się dodatkowych ograniczeń atrybutu id, patrz tutaj . Pozostały tylko wymagania (oprócz tego, że są unikalne w dokumencie):

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

PRE-HTML5:

Identyfikator powinien pasować:

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

1. Musi zaczynać się od znaków AZ lub az
2. Może zawierać -(łącznik), _(podkreślenie), :(dwukropek) i .(kropka)

ale należy unikać :i dlatego, że .:

Na przykład identyfikator może być oznaczony etykietą „ab: c” i oznaczony w arkuszu stylów jako #ab: c, ale oprócz tego, że jest to identyfikator elementu, może oznaczać identyfikator „a”, klasa „b”, pseudo- selektor „c”. Najlepiej uniknąć zamieszania i unikać używania. i: całkowicie.

HTML5: Dozwolone wartości dla identyfikatora i atrybutów klasy

Począwszy od HTML5, jedynymi ograniczeniami wartości identyfikatora są:

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

Podobne zasady mają zastosowanie do klas (z wyjątkiem oczywiście wyjątkowości).

Tak więc wartością mogą być wszystkie cyfry, tylko jedna cyfra, tylko znaki interpunkcyjne, zawierać znaki specjalne, cokolwiek. Po prostu brak białych znaków. To bardzo różni się od HTML4.

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

W HTML5 są one poprawne:

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

Pamiętaj, ż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 następujący identyfikator jest poprawny w HTML5:

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

Jest to jednak nieprawidłowe w CSS:

Ze specyfikacji CSS2.1:

4.1.3 Znaki i wielkość liter

W CSS identyfikatory (w tym nazwy elementów, klasy i identyfikatory w selektorach) mogą zawierać tylko znaki [a-zA-Z0-9] i ISO 10646 znaków U + 00A0 i wyższe, a także myślnik (-) i podkreślenie ( _); nie mogą zaczynać się cyfrą, dwoma myślnikami ani myślnikiem, po których następuje cyfra .

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

Referencje W3C

HTML5

3.2.5.1 id Atrybut

idAtrybut określa unikalny identyfikator swojego elementu (ID).

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

Uwaga: Nie ma żadnych innych ograniczeń dotyczących formy, jaką może przyjąć identyfikator; w szczególności identyfikatory mogą składać się z samych cyfr, zaczynają się od cyfry, zaczynają się od znaku podkreślenia, składają się tylko z interpunkcji itp.

3.2.5.7 class Atrybut

Atrybut, jeśli jest określony, musi mieć wartość będącą zbiorem tokenów oddzielonych spacjami reprezentujących różne klasy, do których należy element.

Klasy, które przypisał do niego element HTML, składają się ze wszystkich klas zwróconych, gdy wartość atrybutu class zostanie podzielona na spacje. (Duplikaty są ignorowane).

Nie ma żadnych dodatkowych ograniczeń dotyczących tokenów, których autorzy mogą używać w atrybucie klasy, ale autorzy są zachęcani do używania wartości opisujących charakter treści, a nie wartości opisujących pożądaną prezentację treści.

W praktyce wiele witryn używa idatrybutów rozpoczynających się od cyfr, mimo że technicznie nie jest to prawidłowy kod HTML.

Specyfikacja robocza HTML 5 rozluźnia reguły dla atrybutów idi name: są one teraz po prostu nieprzezroczystymi ciągami znaków, które nie mogą zawierać spacji.

Łączniki, podkreślenia, kropki, dwukropki, cyfry i litery obowiązują w CSS i JQuery. Poniższe powinno działać, ale musi być unikalne na całej stronie, a także musi zaczynać się od litery [A-Za-z].

Praca z dwukropkami i kropkami wymaga nieco więcej pracy, ale możesz to zrobić, jak pokazano w poniższym przykładzie.

<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 dowód tożsamości musi być unikalny, tj. w dokumencie nie może być wielu elementów o tej samej wartości identyfikatora.

Reguły dotyczące treści identyfikatorów w HTML5 to (oprócz tego, ż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 specyfikacja W3 dotycząca identyfikatora (z 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)
• Atrybut MDN (id)

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

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

CSS

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

Ze specyfikacji HTML 4 ...

Tokeny ID i NAZWA muszą zaczynać się od litery ([A-Za-z]), po której może następować dowolna liczba liter, cyfr ([0-9]), łączników („-”), podkreślników („_”) , dwukropki („:”) i kropki („.”).

EDYCJA: d'oh! Ponownie pobity do przycisku!

Nigdy też nie zapominaj, że identyfikator jest unikalny. Po użyciu wartość identyfikatora może nie pojawić się nigdzie w dokumencie.

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

Z drugiej strony istnieje element klasy. Podobnie jak identyfikator, może pojawiać się wiele razy, ale wartość może być używana wielokrotnie.

Unikalny identyfikator elementu.

W dokumencie nie może być wielu elementów o tej samej wartości identyfikatora.

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

1. musi mieć co najmniej jedną postać

2. nie może zawierać żadnych spacji:

   • U + 0020 SPACE
   • U + 0009 TABULACJA ZNAKÓW (zakładka)
   • U + 000A PODAJNIK LINIOWY (LF)
   • U + 000C FORM FEED (FF)
   • ZWROT PRZEWOZU U + 000D (CR)

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

Wygląda na to, że chociaż dwukropki (:) i kropki (.) Są poprawne w specyfikacji HTML, są one nieprawidłowe jako selektory identyfikatorów w CSS, więc prawdopodobnie najlepiej ich unikać, jeśli zamierzasz ich używać w tym celu.

dla HTML5

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

Co najmniej jedna postać, bez spacji.

Otwiera to drzwi do ważnych przypadków użycia, takich jak użycie znaków akcentowanych. Daje nam również dużo więcej amunicji, aby strzelać 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 naprawdę będziesz ostrożny.

1. Identyfikatory najlepiej nadają się do nazewnictwa części twojego układu, więc nie powinny podawać tej samej nazwy dla identyfikatora i klasy
2. ID pozwala na znaki alfanumeryczne i specjalne
3. ale unikaj używania # : . * !symboli
4. niedozwolone spacje
5. nie zaczyna się cyframi ani myślnikiem, po których następuje cyfra
6. wielkość liter ma znaczenie
7. użycie selektorów ID jest szybsze niż użycie selektorów klas
8. użyj łącznika „-” (podkreślenie „_” może również używać, ale nie jest dobre dla SEO) dla długich nazw klas CSS lub reguł Id
9. Jeśli reguła ma selektor identyfikatora jako selektor klucza, nie dodawaj nazwy znacznika do reguły. Ponieważ identyfikatory są unikalne, dodanie nazwy znacznika niepotrzebnie spowolniłoby proces dopasowywania.
10. W HTML5 atrybutu id można używać w dowolnym elemencie HTML, aw HTML 4.01 atrybutu id nie można używać z: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Każda wartość alfanumeryczna oraz „ - ” i „ _ ” jest poprawna. Ale powinieneś zacząć nazwę id dowolnym znakiem pomiędzy AZ lub az .

Bez spacji, musi rozpoczynać się od znaku od a do z oraz od 0 do 9.

W HTML

Identyfikator powinien zaczynać się od {AZ} lub {az} możesz dodawać cyfry, kropkę, łącznik, podkreślnik, dwukropki.

Na przykład:

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

Ale nawet jeśli możesz zrobić identyfikator za pomocą dwukropków (:) lub kropki (.) CSS ma trudności z użyciem tych identyfikatorów jako Selektora. Głównie, gdy chcesz użyć pseudoelementów (: przed,: po).

Również w JS trudno jest wybrać te identyfikatory. Dlatego powinieneś użyć pierwszych czterech identyfikatorów, jak preferuje wielu programistów, a jeśli to konieczne, możesz użyć dwóch ostatnich.

wartościami mogą być: [az], [AZ], [0-9], [* _: -]

służy do HTML5 ...

możemy dodać identyfikator do dowolnego tagu.

Od wersji ES2015 możemy również używać prawie wszystkich znaków Unicode dla identyfikatorów, jeśli zestaw znaków dokumentu jest ustawiony na UTF8.

Przetestuj tutaj: https://mothereff.in/js-variables

Przeczytaj o: https://mathiasbynens.be/notes/javascript-identifiers-es6

W ES2015 identyfikatory muszą zaczynać się od $, _ lub dowolnego symbolu z podstawową właściwością pochodną Unicode ID_Start.

Reszta identyfikatora może zawierać $, _, U + 200C dla zerowej szerokości dla łącznika zerowego, U + 200D dla zerowej szerokości łącznika lub dowolny symbol z pochodną Unicode właściwość podstawową ID_Continue.

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

Czy powinieneś go użyć? Prawdopodobnie nie jest to dobry pomysł!

Przeczytaj o: https://stackoverflow.com/a/52799593/2494754

alfabety->
wielkie litery i małe cyfry-> 0-9
znaków specjalnych-> ':', '-', '_', '.'

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