it-swarm-eu.dev

Jaké jsou platné hodnoty pro atribut id v HTML?

Při vytváření atributů id pro elementy HTML, jaká pravidla existují pro tuto hodnotu?

1854
Mr Shark

Pro HTML 4 , odpověď je technicky:

Žetony ID a NAME musí začínat písmenem ([A-Za-z]) a mohou být doplněny libovolným počtem písmen, číslic ([0-9]), pomlček ("-"), podtržítek ("_") , dvojtečky (":") a tečky (".").

HTML 5 je ještě více tolerantní, říká pouze, že id musí obsahovat alespoň jeden znak a nesmí obsahovat žádné mezery.

Atribut id rozlišuje velká a malá písmena v XHTML .

Jako čistě praktická záležitost se můžete vyhnout určitým znakům. Období, dvojtečky a '#' mají v CSS selektorech zvláštní význam, takže budete muset tyto znaky uniknout pomocí zpětného lomítka v CSS nebo dvojitého zpětného lomítka v selektorovém řetězci předaném jQuery . Přemýšlejte o tom, jak často budete muset uniknout znaku ve vašem stylu nebo kódu, než se zblázníte s periody a dvojtečky v ids.

Například deklarace HTML <div id="first.name"></div> je platná. Tento prvek můžete vybrat v CSS jako #first\.name a v jQuery jako: $('#first\\.name'). Pokud ale zapomenete na lomítko, $('#first.name'), budete mít dokonale platný selektor hledající prvek s id first a také s třídou name. To je chyba, kterou lze snadno přehlédnout. Můžete být šťastnější z dlouhodobého hlediska, místo toho vyberte id first-name (pomlčku spíše než tečku).

Můžete zjednodušit své vývojové úkoly přísným dodržováním pojmenování. Pokud se například omezíte pouze na malá písmena a vždy oddělujete slova buď pomlčkami nebo podtržítky (ale ne oběma, vyberte jednu a nikdy nepoužívejte druhou), pak máte snadno zapamatovatelný vzor. Nikdy se nebudete divit "bylo to firstName nebo FirstName?" protože budete vždy vědět, že byste měli zadat first_name. Dáváte přednost velbloudí případ? Pak se omezte na to, žádné pomlčky nebo podtržítka, a vždy, konzistentně používat buď velká nebo malá písmena pro první znak, nemíchejte je.


Nyní velmi nejasným problémem bylo, že alespoň jeden prohlížeč, Netscape 6, nesprávně zpracoval hodnoty atributů id jako citlivé na velikost písmen . To znamenalo, že pokud jste zadali id="firstName" ve vašem HTML (malá písmena „f“) a #FirstName { color: red } ve vašem CSS (velká písmena „F“), prohlížeč by se nepodařilo nastavit barvu prvku na červenou. V době této úpravy, duben 2015, doufám, že nebudete požádáni o podporu Netscape 6. Zvažte tuto historickou poznámku pod čarou.

1584
dgvid

Z specifikace HTML 4 :

Žetony ID a NAME musí začínat písmenem ([A-Za-z]) a mohou být doplněny libovolným počtem písmen, číslic ([0-9]), pomlček ("-"), podtržítek ("_") , dvojtečky (":") a tečky (".").

Běžnou chybou je použití ID, které začíná číslicí.

211
Peter Hilton

Můžete technicky použít dvojtečky a tečky v atributech id/name, ale důrazně doporučuji vyhnout se oběma.

V CSS (a několik JavaScript knihoven, jako je jQuery), jak období a tlustého střeva mají zvláštní význam a budete narazit na problémy, pokud si nejste opatrní. Období jsou selektory tříd a dvojtečky jsou pseudo-selektory (např. ": Vznášející se" pro prvek, když je nad ním myš).

Pokud dáte prvku ID "my.cool:thing", bude váš selektor CSS vypadat takto:

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

Což vlastně říká, "prvek s id" můj ", třída" cool "a" věc "pseudo-selektor v CSS-mluvit.

Držte se A-Z každého případu, čísel, podtržítek a pomlček. A jak bylo uvedeno výše, ujistěte se, že vaše ids jsou jedinečné.

To by mělo být vaším prvním zájmem.

145
Michael Thompson

jQuery does zpracovat platné jméno ID. Stačí jen uniknout metaznakům (tj. Tečkám, středníkům, hranatým závorkám ...). Je to jako říct, že JavaScript má problém s uvozovkami jen proto, že nemůžete psát

var name = 'O'Hara';

Selectory v jQuery API (viz dolní poznámka)

63

Přísně by to mělo odpovídat

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

Zdá se však, že jQuery mají problémy s dvojtečky, takže je lepší se jim vyhnout.

60
Mr Shark

HTML5:

se zbaví dalších omezení na atributu id viz zde . Jediné zbývající požadavky (kromě toho, že jsou v dokumentu jedinečné) jsou:

  1. hodnota musí obsahovat alespoň jeden znak (nesmí být prázdný)
  2. nemůže obsahovat žádné mezery.

PRE-HTML5:

ID by mělo odpovídat:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Musí začínat znaky A-Z nebo a-z
  2. Může obsahovat - (spojovník), _ (podtržítko), : (dvojtečka) a . (období)

ale měli bychom se vyhnout : a . beacause:

ID by mohlo být například označeno jako "ab: c" a odkazováno v tabulce stylů jako #ab: c, ale stejně jako id pro prvek, mohlo by to znamenat ID "a", třída "b", pseudo- volič "c". Nejlepší je vyhnout se zmatku a držet se dál od používání. a: celkem.

52
Zaheer Ahmed

HTML5: Povolené hodnoty pro atributy ID a třídy

Od HTML5 jsou jediná omezení hodnoty ID:

  1. musí být v dokumentu jedinečné
  2. nesmí obsahovat mezery
  3. musí obsahovat alespoň jeden znak

Obdobná pravidla platí i pro třídy (s výjimkou jedinečnosti).

Hodnota tedy může být všechny číslice, pouze jedna číslice, pouze interpunkční znaky, včetně speciálních znaků. Prostě žádné mezery. To se velmi liší od HTML4.

V HTML 4 musí hodnoty ID začínat písmenem, které pak mohou následovat pouze písmena, číslice, pomlčky, podtržítka, dvojtečky a tečky.

V HTML5 jsou platné:

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

Mějte na paměti, že použití čísel, interpunkcí nebo speciálních znaků v hodnotě ID může způsobit potíže v jiných kontextech (např. CSS, JavaScript, regex).

Následující ID je například platné v HTML5:

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

Je však neplatné v CSS:

Z specifikace CSS2.1:

4.1.3 Znaky a případ

V CSS, identifikátory (včetně názvů prvků, tříd a ID v selektorech) mohou obsahovat pouze znaky [a-zA-Z0-9] a znaky ISO 10646 U + 00A0 a vyšší, včetně pomlčky ( -) a podtržítko (_);nemohou začínat číslicí, dvěma pomlčkami nebo pomlčkou následovanou číslem.

Ve většině případů můžete být schopni uniknout znakům v kontextu, kde mají omezení nebo zvláštní význam.


W3C reference

HTML5

3.2.5.1 Atribut id

Atribut id udává jedinečný identifikátor (ID) prvku.

Hodnota musí být jedinečná mezi všemi ID v domovském podstromu elementu a musí obsahovat alespoň jeden znak. Hodnota nesmí obsahovat žádné mezery.

Poznámka: Neexistují žádná další omezení týkající se toho, jakou formu může mít ID; ID mohou obsahovat pouze číslice, začínají číslicí, začínají podtržítkem, skládají se pouze z interpunkce atd.

3.2.5.7 Atribut class

Atribut, pokud je specifikován, musí mít hodnotu, která je množinou tokenů oddělených mezerami představujících různé třídy, do kterých prvek patří.

Třídy, ke kterým je prvek HTML přiřazen, se skládají ze všech tříd vrácených při rozdělení hodnoty atributu třídy na mezery. (Duplicity jsou ignorovány.)

Neexistují žádná další omezení na tokenů, které mohou autoři používat v atributu class, ale autoři jsou vyzváni, aby používali hodnoty, které popisují povahu obsahu, spíše než hodnoty, které popisují požadovanou prezentaci obsahu.

47
Michael_B

V praxi mnoho stránek používá id atributy začínající čísly, i když to není technicky platné HTML.

Specifikace HTML 5 draft uvolní pravidla pro atributy id a name: nyní jsou to pouze neprůhledné řetězce, které nemohou obsahovat mezery.

32
pdc

Pomlčky, podtržítka, tečky, dvojtečky, čísla a písmena jsou platné pro použití s ​​CSS a JQuery. Následující by mělo fungovat, ale musí být jedinečné na stránce a musí začínat písmenem [A-Za-z].

Práce s dvojtečkou a periody potřebuje trochu více práce, ale můžete to udělat podle následujícího příkladu.

<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

Mějte na paměti, že ID musí být jedinečné, tj. v dokumentu nesmí být více prvků, které mají stejnou hodnotu id.

Pravidla týkající se obsahu ID v HTML5 jsou (kromě toho, že jsou jedinečná):

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.

Toto je 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).

Více informací:

  • W3 - globální atributy (id)
  • MDN atribut (id)
23
Sergio

Chcete-li odkazovat na id s periodou v něm, musíte použít zpětné lomítko. Nejste si jisti, zda je to stejné pro pomlčky nebo podtržítka. Například: HTML

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

CSS

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

Nikdy nezapomeňte, že ID je jedinečné. Po použití se hodnota ID nemusí objevit nikde v dokumentu.

Můžete mít mnoho ID, ale všechny musí mít jedinečnou hodnotu.

Na druhé straně je zde prvek třídy. Stejně jako ID se může objevit mnohokrát, ale hodnota může být znovu a znovu použita.

14
Vordreller

Z HTML 4 spec ...

Žetony ID a NAME musí začínat písmenem ([A-Za-z]) a mohou následovat libovolný počet písmen, číslic ([0-9]), pomlček ("-"), podtržítka ("_") , dvojtečky (":") a tečky (".").

EDIT: d'oh! Znovu na knoflíku!

14
Steve Morgan

Jedinečný identifikátor prvku.

V dokumentu nesmí být více prvků, které mají stejnou hodnotu id.

Libovolný řetězec s následujícími omezeními:

  1. musí být alespoň jeden znak dlouhý
  2. nesmí obsahovat žádné mezery:

    • U + 0020 SPACE
    • U + 0009 CHARAKTER TABULACE (karta)
    • U + 000A LINE FEED (LF)
    • U + 000C FORM FEED (FF)
    • U + 000D DOPRAVA (CR)

Použití znaků s výjimkou ASCII letters and digits, '_', '-' and '.' může způsobit problémy s kompatibilitou, protože nebyly povoleny v HTML 4. Ačkoli toto omezení bylo zrušeno v HTML 5, ID by mělo začínat dopisem pro kompatibilitu.

11
Bhavin Solanki

Zdá se, že ačkoliv jsou dvojtečky (:) a tečky (.) Platné ve specifikaci HTML, jsou neplatné jako voliče id v CSS , takže se nejlépe vyhnete, pokud je chcete použít pro tento účel.

9
lstg

pro HTML5

Hodnota musí být jedinečná mezi všemi ID v domovském podstromu elementu a musí obsahovat alespoň jeden znak. Hodnota nesmí obsahovat žádné mezery.

Nejméně jeden znak, žádné mezery.

Tím se otevírají dveře pro platné případy použití, například použití znaků s diakritikou. To nám také dává spoustu více munice střílet sami v nohou s, protože nyní můžete použít id hodnoty, které způsobí problémy s CSS a JavaScript, pokud jste opravdu opatrní.

Platná je jakákoliv alfanumerická hodnota a " - " a " _ ". Měli byste ale spustit název id s libovolným znakem mezi A-Z nebo a-z .

7
Tazwar Utshas
  1. ID jsou nejvhodnější pro pojmenování částí rozvržení, takže by neměly dát stejný název pro ID a třídu
  2. ID umožňuje alfanumerické a speciální znaky
  3. ale nepoužívejte symboly # : . * !
  4. není povoleno mezery
  5. nespustí se čísly nebo pomlčkou následovanou číslem
  6. citlivý na velká písmena
  7. použití voličů ID je rychlejší než použití voličů tříd
  8. použít pomlčku "-" (podtržítko "_" lze také použít, ale ne dobré pro seo) pro dlouhé třídy CSS nebo Id pravidla pravidel
  9. Pokud pravidlo má jako volič klíčů volič ID, nepřidávejte do pravidla název značky. Vzhledem k tomu, že ID jsou jedinečná, přidání názvu značky by zbytečně zpomalilo proces párování.
  10. V HTML5 lze atribut id použít na libovolném prvku HTML a v HTML 4.01 nelze atribut id použít s: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Žádné mezery, musí začínat alespoň znakem od a do z a 0 až 9.

5
Wembo Mulumba