HTML/CSS/JS identifikátor id

HTML atribut id má poměrně široké využití:

1. Odkazování na části stránky pomocí #kotev:

   <a href="#identifikator">
     Odkaz
   </a>
   …
   <div id="identifikator"></div>

2. Propojení dvojice značek přes <label for>:

   <input id="identifikátor">
   <label for="identifikátor">
     Popisek tlačítka
   </label>

3. Znázornění vztahu při použití aria-* atributů:

   <label for="policko>
     Název pole
   </label>
   <input id="policko" aria-describedby="popisek">
   <i id="popisek>Popisek políčka</i>

4. Zaměření elementu CSS selektorem:

   #identifikator {
       color: red;
   }

5. Získání elementu v JavaScriptu metodou getElementById:

   var el = document.getElementById('identifikator');

   V JS má id ještě jednu zajímavou vlastnost. Každý HTML element s identifikátorem je dostupný přímo přes proměnnou stejného názvu.

   <div id="identifikator"></div>
   <script>
     identifikator.innerHTML = 'Text';
   </script>

   Do uvedeného <div>u se tak nastaví obsah „Text“ – ukázka.

   Obecně na to není moc dobré spoléhat, protože je velmi snadné si tuto proměnnou přepsat jiným obsahem.

Použití identifikátorů v praxi

Ačkoliv je s „idéčky“ možné dělat spoustu věcí, v praxi si jde vystačit s použitím pouze pro kotvy a provázání <label>ů s formulářovými prvky + provázání s atributy pro lepší přístupnost aria-*.

V CSS si jde vystačit jen s třídami. ID oproti nim nenabízejí nic navíc – kromě toho je selektor #id silnější než .trida – to bývá většinou nevýhodné, jelikož bývá přehlednější mít sílu selektorů co možná nejnižší.

Pro zaměření elementů v JavaScriptu je zase užitečné mít v HTML kódu jasně poznamenané, co se v JS používá, tj. využít třeba prostých tříd s prefixem js-*.

<div class="js-identifikator">
</div>

Při dodržení tohoto postupu se jde potom spolehnout na to, že pro CSS se používají jen třídy, pro JavaScript třídy s prefixem a identifikátory tak slouží pouze pro #odkazování a provázání elementů.

Povolené znaky

V HTML 5 se poměrně uvolnilo omezení znaků, které je možné v id atributu použít.

Existuji pouze dvě pravidla – v ID nemůže být mezera a musí mít alespoň jeden znak.

Není tedy problém používat libovolnou diakritiku a speciální znaky. Jediný problém může nastat v CSS, kde platí odlišná pravidla. Číslo na začátku ID se tak musí escapovat nebo použít atributový selektor.

<div id="1337"></div>

Výše uvedený element tak (ne)jde zaměřit:

#1337 { /* nefunguje */ }
[id=1337] { /* atribut funguje */ }
#\31 337 { /* escapování funguje */ }

Při používání ID ke stylování je tak lepší zachovat přísnější pravidla.

Escapování v CSS

Je-li nevyhnutelné části selektoru v CSS escapovat, jde k tomu použít nějaký hotový nástroj:

Duplicitní ID

Ještě by každé id mělo být na stránce pouze jednou – jinak je stránka nevalidní. V praxi je to spíš problém kvůli tomu, že první ID vyhrává a ta další jsou ignorována (vyjma CSS, kde není problém zaměřit více elementů se stejným identifikátorem).

Omezení v HTML 4

Ve starších specifikacích HTML byly požadavky na znaky v identifikátorech mnohem přísnější. Podobně jako v názvech CSS tříd neměl identifikátor začínat číslicí.

Obsahovat mohl pouze písmena bez diakritiky, číslice, tečku, dvojtečku, spojovník a podtržítko.

V prohlížečích dlouhodobě funguje všechno, takže se toto omezení ukázalo jako zbytečně přísné.